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.

How to use

You can use the ToggleButton in different modes. Either as a stand alone component, or together with the ToggleButton.Group context.

Multi select

If multiselect is enabled on the group, several items can be enabled/disabled by the user.

You would have to decide if you want to track the state by yourself by using the checked property, or you want just to listen to the internal state with on_change(({ values } => console.log(values))). You have then to give every item also a value property.

Demos

Unchecked ToggleButton

Checked ToggleButton

Default ToggleButton group

Multi-select ToggleButton group

Vertical aligned ToggleButton group with checkbox variant and multiselect

ToggleButton group as multiselect with status message

ToggleButton with status messages and a group variant as radio

Disabled ToggleButton group

ToggleButtons with suffix

ToggleButtons with icons only