Toggle Group
A group of toggle buttons where one or multiple can be selected. Built on Radix UI Toggle Group.
Single Selection
Multiple Selection
Outline Variant
Usage
Use Toggle Group for related options like text alignment or formatting. Use "single" for mutually exclusive options, "multiple" for independent toggles.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Selection mode |
| value | string | string[] | — | Controlled selected value(s) |
| onValueChange | (value) => void | — | Callback when selection changes |
| variant | "default" | "outline" | "default" | Visual style |
| size | "default" | "sm" | "lg" | "default" | Size of the toggles |