Switch
A control that allows the user to toggle between checked and not checked.
Features
- Full keyboard navigation.
- Can be controlled or uncontrolled.
Install
Import
API
Root
Props | Type | Default |
---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
checked | boolean | undefined |
defaultChecked | boolean | - |
disabled | boolean | false |
id | string | - |
name | string | - |
required | boolean | false |
value | string | on |
Event | Type |
---|---|
update:checked | [_checked: boolean] |
Data attribute | Value |
---|---|
[data-orientation] | 'checked' | 'unchecked' |
[data-disabled] | Present when disabled |
Thumb
Props | Type | Default |
---|---|---|
as | AsTag | Component | span |
asChild | boolean | false |
Data attribute | Value |
---|---|
[data-orientation] | 'checked' | 'unchecked' |
[data-disabled] | Present when disabled |