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.
Manual installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Orientation
By default, the toggle button group is arranged horizontally. Use the orientation prop to switch to a vertical layout.
Selection mode
By default, the toggle button group allows only a single selection. You can change this by setting the selectionMode 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 the selectedKeys prop.
Disabled
You can disable an entire toggle group by setting the isDisabled prop on the ToggleGroup component, which disables all toggles in the group. Alternatively, you can disable specific toggle buttons individually by setting the isDisabled prop on the Toggle component.