Forms/ToggleGroup
ToggleGroup
A segmented group of toggle buttons. Supports single selection, like a radio group, or multiple selection, like independent toolbar toggles.
import { ToggleGroup, ToggleGroupItem } from "@animui/ui"Single selection
Multiple selection
Disabled item
ToggleGroup Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Whether one or multiple items can be active at a time. |
value | string | string[] | — | Controlled active value(s). String for single, string array for multiple. |
defaultValue | string | string[] | — | Uncontrolled initial active value(s). |
onValueChange | (value: string | string[]) => void | — | Called when the active value(s) change. |
children | React.ReactNode | — | ToggleGroupItem elements. |
className | string | — | Additional classes for the group wrapper. |
ToggleGroupItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique value identifying this item within the group. |
children | React.ReactNode | — | Content rendered inside the item. |
disabled | boolean | false | Prevents interaction and applies reduced opacity. |
className | string | — | Additional classes for the item button. |
Accessibility
- ✓The group is exposed with
role="group". - ✓Each item is a native
<button>witharia-pressed. - ✓Disabled items are removed from the tab order.