Skip to content

ToggleButton

Description

The ToggleButton component should be used to toggle on or off a limited number of choices.

You can use the React component <ToggleButton.Group> to wrap several ToggleButton. This makes it more easy to handle the event on_change on a higher level - as well as several other context related properties.

By default the ToggleButton.Group is single-select, like a Radio button. But You can easily enable multiselect as well.

Demos

Unchecked ToggleButton

Checked ToggleButton

ToggleButton Group:

Default ToggleButton group

Multi-select:

Multi-select ToggleButton group

Vertical Group:

Vertical aligned ToggleButton group with checkbox variant and multiselect

ToggleButton Group with status:
Error message

ToggleButton group as multiselect with status message

ToggleButtons with status:
Error messageInfo message

ToggleButton with status messages and a gorup variant as radio

Disabled Group:

Disabled ToggleButton group

External state update with possible event on_state_update