Toggle Group
A set of toggles where one or multiple can be pressed. Inherits Toggle's variant/size via context. Useful for alignment/formatting toolbars.
Single-select (text alignment)
Multi-select (formatting marks)
Sizes
Installation
pnpm
pnpm dlx @hex-core/cli add toggle-groupFormatting group
Multiple-select toggle group for text formatting
tsx
<ToggleGroup type="multiple">
<ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Italic">I</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Underline">U</ToggleGroupItem>
</ToggleGroup>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
typerequired | "single" | "multiple" | — | Single allows one pressed at a time, multiple allows many |
value | object | — | Controlled pressed value(s). string when type='single', string[] when type='multiple' |
defaultValue | object | — | Default pressed value(s). string when type='single', string[] when type='multiple' |
onValueChange | function | — | Callback on value change |
variant | "default" | "outline" | default | Inherited by all ToggleGroupItems |
size | "default" | "sm" | "lg" | default | Inherited by all ToggleGroupItems |
disabled | boolean | false | Disable all items |
AI Guidance
When to use
Use for toolbar toggles where users pick one of many (type='single') or multiple (type='multiple'): text alignment, formatting (bold/italic/underline), view modes.
When not to use
Don't use for form radio fields (use RadioGroup). Don't use for standalone two-state buttons (use Toggle). Don't use for navigation (use Tabs).
Common mistakes
- Forgetting the type prop (required)
- Missing aria-label on icon-only items
- Using for form submission without name prop
Accessibility
Radix implements the WAI-ARIA toolbar pattern with roving focus. Arrow keys move focus, Space/Enter toggles. Each icon-only item needs aria-label.
Related components
Token budget: 500