Toggle Group
A set of toggles for picking one option, like a date range, or several, like text formatting.
Preview
Usage
import {
ToggleGroup,
ToggleGroupItem,
} from '@vitnode/core/components/ui/toggle-group'<ToggleGroup aria-label="Text formatting" multiple variant="outline">
<ToggleGroupItem aria-label="Bold" value="bold">
<BoldIcon />
</ToggleGroupItem>
<ToggleGroupItem aria-label="Italic" value="italic">
<ItalicIcon />
</ToggleGroupItem>
</ToggleGroup>variant and size go on the group, and every item follows.
Single selection
Leave out multiple and only one item can be pressed. The pressed background
glides between items, and jumps when the visitor prefers reduced motion.
<ToggleGroup defaultValue={['week']} variant="outline">
<ToggleGroupItem value="day">Day</ToggleGroupItem>
<ToggleGroupItem value="week">Week</ToggleGroupItem>
<ToggleGroupItem value="month">Month</ToggleGroupItem>
</ToggleGroup>The value is always an array, even in single mode. Clicking the pressed item
empties it, so ignore empty arrays in onValueChange when one option must stay
picked:
<ToggleGroup
onValueChange={(next) => {
if (next.length > 0) setValue(next);
}}
value={value}
>Spacing and orientation
spacing pulls the items apart on the spacing scale. At 0 (the default) they
share borders. orientation="vertical" stacks them.
<ToggleGroup spacing={2} variant="outline">...</ToggleGroup>
<ToggleGroup orientation="vertical" variant="outline">...</ToggleGroup>Accessibility
- Give the group an
aria-labeland every icon-only item its own. - Arrow keys move focus between items, and Space or Enter presses one.
Props
Prop
Type