Toggle Group
Groups related two-state controls into a compact single- or multi-selection interface.
@rivetui/toggle-groupPreview
Explore each composition interactively, then open its code in the same context.
Single selection
Use one pressed item for mutually exclusive view or formatting modes.
Multiple selection
Enable multiple independent options when more than one state may be active.
Vertical
Match orientation to the visual arrangement so arrow-key navigation remains predictable.
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
Install component
bunx --bun shadcn@latest add @rivetui/toggle-groupPublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
ToggleGroup
| Prop | Type | Default |
|---|---|---|
value | readonly string[] | — |
defaultValue | readonly string[] | [] |
onValueChange | (value: string[], details) => void | — |
multiple | boolean | false |
orientation | "horizontal" | "vertical" | "horizontal" |
loopFocus | boolean | true |
variant | "outline" | "ghost" | "outline" |
size | "sm" | "md" | "lg" | "md" |
disabled | boolean | false |
ToggleGroupItem
| Prop | Type | Default |
|---|---|---|
value | string | required |
disabled | boolean | false |
onPressedChange | (pressed: boolean, details) => void | — |