Toggle Group
A toggle button group provides an intuitive way for users to switch between multiple options, supporting both single and multi-selection modes.
Basic
A toggle button group allows users to switch between multiple options, enabling one or more selections at a time.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Orientation
By default, the toggle button group is arranged horizontally. Use the orientation prop to switch to a vertical layout.
Type
The toggle button group allows a "single" and "multiple" selection. You can change this by setting the type prop to "multiple". When in multiple selection mode, individual buttons will no longer have rounded corners.
Size
By default, the toggle button group has a medium size. You can change the size by using the size prop.
Square size
The size option also includes a square variant, which is useful when you only want to display an icon on the toggle button.
Controlled
You can control the state of the toggle button group by using Function Bindings .
Disabled
You can disable an entire toggle group by setting the disabled prop on the ToggleGroup.Root component, which disables all toggles in the group. Alternatively, you can disable specific toggle buttons individually by setting the disabled prop on the Toggle component.