Form Inputs
Toggle Group
A set of two-state buttons that can be toggled on or off.
A set of two-state buttons that can be toggled on or off.
Multiple select#
Icons#
Variants#
Component props#
ToggleGroup#
| Name | Type | Description |
|---|---|---|
| label | string | Label text displayed above the group |
| selectionMode | SelectionMode | "single" | "multiple" (default: "single") |
| value | string[] | Controlled selected values |
| defaultValue | string[] | Default selected values |
| variant | 'default' | 'outline' | 'primary' | Item style, shared with items through context ("primary" is kept for backward compatibility) |
| size | 'sm' | 'md' | 'lg' | Item size, shared with items through context |
| spacing | number | Gap between items in spacing units. 0 (default) renders a joined group. |
| orientation | 'horizontal' | 'vertical' | Layout direction (default: "horizontal") |
| onChange | (value: string[]) => void | Called when selection changes |
ToggleGroupItem#
| Name | Type | Description |
|---|---|---|
| id | string | Unique item identifier (required unless value is set) |
| variant | 'default' | 'outline' | 'primary' | Overridden by the parent group when set there |
| size | 'sm' | 'md' | 'lg' | Overridden by the parent group when set there |
| isDisabled | boolean | Disables the item |