Toggle group
A toolbar of related modes with one tab stop
Single · alignment
Multiple · formatting
One tab stop
Usage
import {
ToggleGroup,
ToggleGroupItem,
} from "@gpuixui/components/toggle-group";
<ToggleGroup type="single" label="Alignment" defaultValue="left">
<ToggleGroupItem value="left" label="Align left">
Left
</ToggleGroupItem>
<ToggleGroupItem value="centre" label="Align centre">
Centre
</ToggleGroupItem>
</ToggleGroup>;
<ToggleGroup type="multiple" label="Formatting" defaultValue={["bold"]}>
<ToggleGroupItem value="bold" label="Bold">
Bold
</ToggleGroupItem>
<ToggleGroupItem value="italic" label="Italic">
Italic
</ToggleGroupItem>
</ToggleGroup>;type="single" keeps at most one mode on and clears it when the live option is
pressed again; type="multiple" lets any number stay on. The group is one tab
stop: the arrow keys move focus between options without pressing them.
Keyboard
| Key | Effect |
|---|---|
ArrowRight / ArrowLeft | move focus along a horizontal group |
ArrowDown / ArrowUp | move focus along a vertical group |
Home / End | the first or last enabled option |
Enter / Space | press the focused option |
API
| Part | Prop | Type | Default |
|---|---|---|---|
ToggleGroup | type | "single" | "multiple" | "multiple" |
ToggleGroup | value | string for single, readonly string[] for multiple | — |
ToggleGroup | defaultValue | the same shape as value | — |
ToggleGroup | onValueChange | (next: string) => void or (next: readonly string[]) => void | — |
ToggleGroup | orientation | "horizontal" | "vertical" | "horizontal" |
ToggleGroup | variant | "default" | "outline" | "default" |
ToggleGroup | size | "sm" | "md" | "lg" | "md" |
ToggleGroup | square | boolean | false |
ToggleGroup | disabled | boolean | false |
ToggleGroup | label | string | — |
ToggleGroup | description | string | — |
ToggleGroup | options / children | option data, or the item elements | — |
ToggleGroup | style / itemStyle | StateStyle<…> | — |
ToggleGroup | className | string | — |
ToggleGroup | testId | string | — |
ToggleGroup | itemTestId | (value: string) => string | — |
ToggleGroup | ref / aria-id / onLayout | host props (on the tab stop) | — |
ToggleGroupItem | value | string (required) | — |
ToggleGroupItem | label | string (required) | — |
ToggleGroupItem | description | string | — |
ToggleGroupItem | disabled | boolean | false |
ToggleGroupItem | children | ReactNode | label |
Edit this page on GitHubpackages/components/docs/toggle-group.mdx