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, , , ,

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

ToggleButtonGroupControlledProps

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

ToggleButtonGroupUncontrolledProps

Name	Type	Default	Description
defaultValue?		-	The value of the group (uncontrolled).

ToggleButtonGroupItem

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

ToggleButtonGroupItemProps

extends, , , ,

Name	Type	Default	Description
disabled?		false	When true, the item cannot be clicked for example.
value		-	The controlled value of the ToggleButtonGroupItem.
checked?		false	Zero or more items in a group can be checked.
hovered?		false	Indicates if the mover is currently over the item.