Toggle Group
betaA set of toggles whose highlight slides between choices on a spring in single mode, and springs into each pressed item in multiple mode.
- Forms
- 1 file
- 3 npm packages
- Accessibility notes
- Animates with motion
Loading the example…
pnpm dlx @dowel-ui/cli add toggle-groupnpm packages installed: class-variance-authority, motion, radix-ui.
import { ToggleGroup } from "@/components/ui/toggle-group";Default
Segmented
Sizes
Controlled
<ToggleGroup>
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "default" |
Every prop of Radix UI’s ToggleGroup.Root, plus className.
<ToggleGroupItem>
Every prop of Radix UI’s ToggleGroup.Item, plus className.
Radix ToggleGroup: one tab stop for the whole group, with arrow keys moving between items. In single mode the group is a radiogroup and each item a radio with aria-checked; in multiple mode it is a toolbar and each item a button with aria-pressed. Name the group with aria-label, and icon-only items with their own aria-label. The sliding pill and per-item highlights are aria-hidden decoration — selection is announced from the state, never from colour. Nothing animates on first paint, and the springs run inside MotionConfig reducedMotion="user", so under reduced motion the pill jumps and highlights appear at once.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes