Toggle Group
A set of two-state buttons that can be toggled on or off, typically used for filtering or switching between different views or options.
Basic
With type="single", one item is on at a time and a sliding indicator marks it.
Multiple selection
With type="multiple", several items can be on at once. The sliding indicator only shows in single mode, so selected items are marked by their text color.
Sizes
Set size on the root: regular (the default) or small. The heights match the Button scale.
With icons
Use iconStart or iconEnd for icons. Keep children reserved for the item label; icon-only items must provide an accessible label.
Controlled
Pass value and onValueChange to control the selection. In single mode, clicking the selected item passes an empty string; ignore it to keep one item selected.
Showing the last 30 days
Disabled
Set disabled on an item to make it unavailable. Arrow-key navigation skips it.
ToggleGroup.Root
The type of toggle group - single or multiple selection
The current value(s) of the toggle group (controlled)
The default value(s) of the toggle group (uncontrolled)
Callback fired when the value changes
Control height and item typography. Matches the Button scale
Default: regular
Lays the items out in a row or a column
Default: horizontal
Whether the toggle group is disabled
Default: false
Accessible label for the toggle group
Additional CSS classes to apply to the toggle group
Additional CSS classes for the sliding active indicator
ToggleGroup.Item
The value of the toggle item
Label displayed by the toggle item
Accessible label for the toggle item. Required when the item has no children
Icon displayed before the label
Icon displayed after the label
Whether the toggle item is disabled
Default: false
Additional CSS classes to apply to the toggle item
Additional CSS classes for the label slot
Additional CSS classes for the start icon slot
Additional CSS classes for the end icon slot