ToggleButtonGroup

ToggleButtonGroup lets users toggle between a set of related options, typically with one preselected. It's best for switching between views or a compact group of options with immediate effect.

OverviewPropertiesUsage

Import

import { ToggleButtonGroup } from '@dynatrace/strato-components/forms';

Demo

Control state

The ToggleButtonGroup supports controlled behavior, enabling direct management of its state. This is achieved by passing a handler to the onChange prop, which is invoked whenever the internal state changes. The updated state can then be passed to the value prop to apply the new selection.

Icons

Icons can be placed before or after the text in the ToggleButtonGroup.Item. If an item only displays an icon, include a tooltip describing what the icon represents.

Disable options

The ToggleButtonGroup offers two disable options. You can disable the entire group or disable specific buttons. To implement either option, apply the disabled prop to the target element (either the group or an individual button).

Width

The width property of the ToggleButtonGroup component accepts three types of values:

• content: adjusts the width to fit the content,
• full: expands to the full available width,
• Custom string values (e.g., "400px"): allows specifying an exact width.

Validation

The ToggleButtonGroup supports an error state, which can be triggered in two primary ways:

• Form submission: If the form containing the ToggleButtonGroup is submitted with invalid or missing data, the component can reflect the error state.
• Validation function: Validation logic can be applied to determine whether the selected value meets the required criteria.

This example demonstrates how to show users an validation message using FormFieldMessages.