Toggle
No consumersA pressed/unpressed control, and the segmented group built from it.
Toggle is a single control that is either pressed or not — bold, italic, snap to grid. ToggleGroup makes a segmented control where exactly one item is selected. For a setting that reads as on/off in prose, use a Switch instead.
Toggle
Controlled only: pass pressed and handle onPressedChange. The button sets aria-pressed, so an icon-only toggle still needs its own aria-label.
ToggleGroup
The group is a radiogroup — one value at a time, and ariaLabel names the set. Variant and size are set on the group and inherited by its items through context, so they cannot disagree.
Props
Toggle
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | — | Required. The controlled pressed state. |
onPressedChange | (pressed: boolean) => void | — | Called with the next state on click. |
variant | "default" | "outline" | "default" | `outline` adds a border for use on flush surfaces. |
size | "sm" | "default" | "lg" | "default" | Control height. |
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | null | — | Required. The selected item's value, or null for none. |
onValueChange | (value: string) => void | — | Called with the clicked item's value. |
variant | "default" | "outline" | "default" | Inherited by every item. |
size | "sm" | "default" | "lg" | "default" | Inherited by every item. |
ariaLabel | string | — | Names the group. Individual items still need their own labels. |
ToggleGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Required. Compared against the group's `value` to decide selection. |