Skip to main content

ToggleButtonGroup

The ToggleButtonGroup is used to group related options. The group consists of at least two ToggleButtonGroupItems. The ToggleButtonGroup supports exclusive selection only. That means that selecting one option deselects any other.

Import

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

Use cases

CodeSandbox

Disable options

The toggle button group can either be completely disabled or alternatively just specific options can be disabled. Both can be done by applying the disabled prop to the corresponding item (the group or the button itself).

CodeSandbox

Control the state

To observe the value and act on its changes it's also possible to listen to changes and manually set the value accordingly.

CodeSandbox

Props

ToggleButtonGroupProps

Signature:

export declare type ToggleButtonGroupProps = & ( | );

ToggleButtonGroupBaseProps

extends, , , , ,
NameTypeDefaultDescription
required?
falseWhen true, at least one item in the group has to be active. Otherwise, no item needs to be active.
readOnly?
falseWhen true, all items in the group are read only.
name?
-Name used for the component when submitting it in a form.
disabled?
falseWhen true, all items in the group are disabled and this means for example they cannot be interacted with.

ToggleButtonGroupControlledProps

NameTypeDefaultDescription
value
-The controlled value for the entire ToggleButtonGroup.
onChange
(value: , event?: < | >) =>
-Handler that is called when the value of the group changes.

ToggleButtonGroupUncontrolledProps

NameTypeDefaultDescription
defaultValue?
-The value of the group (uncontrolled).

ToggleButtonGroupItem

You can use the ToggleButtonGroupItem component to render an item inside the ToggleButtonGroup.

ToggleButtonGroupItemProps

extends, , , ,
NameTypeDefaultDescription
disabled?
falseWhen true, the item cannot be clicked for example.
value
-The controlled value of the ToggleButtonGroupItem.
checked?
falseZero or more items in a group can be checked.
hovered?
falseIndicates if the mover is currently over the item.
Still have questions?
Find answers in the Dynatrace Community