Toggle Group
A set of two-state buttons that can be toggled on or off.
Features
- Full keyboard navigation.
- Supports horizontal/vertical orientation.
- Support single and multiple pressed buttons.
- Can be controlled or uncontrolled.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
defaultValue | string | string[] | undefined |
dir | Direction | ltr |
disabled | boolean | false |
loop | boolean | false |
modelValue | string | string[] | - |
orientation | DataOrientation | vertical |
rovingFocus | boolean | true |
type | TypeEnum | single |
| Event | Type |
|---|---|
update:modelValue | [_value: string] |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
Item
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
defaultValue | boolean | undefined |
disabled | boolean | false |
pressed | boolean | undefined |
value | string | on |
| Data attribute | Value |
|---|---|
[data-state] | 'on' | 'off' |
[data-disabled] | Present when disabled |
[data-orientation] | 'vertical' | 'horizontal' |