Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenToggle 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 lets folks flip a choice on or off, like switching between two vibes or modes.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Toggle Group's decked out with several components to make it bangin'.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Anatomy
Orientation
By default, the toggle button group is horizontally oriented. You can change it to a vertical orientation by using the orientation prop.
Selection Mode
You can change the selection mode of the toggle button group by using the selectionMode prop.
Appearance
You can change the appearance of the toggle button group by using the appearance prop.
Gap
By default, the toggle button group has no gap between the buttons. You can change the gap by using the gap prop.
Never ever set the gap to 0 when you want to use the plain appearance.
Size
By default, the toggle button group has a medium size. You can change the size by using the size prop.
Controlled
You can control the state of the toggle button group by using the selectedKeys prop.
Selected: bold
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.