ToggleButtonGroup

ToggleButtonGroup allows users to trigger actions or events with a single click anywhere within the button container. Users can also trigger a button by pressing Enter or Space while the button has focus.

OverviewProperties

Import

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

Use cases

CodeSandbox

Control the 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.

CodeSandbox

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.

CodeSandbox

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).

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox