Checkbox
A control that allows the user to toggle between checked and not checked.
Features
- Supports indeterminate state.
- Full keyboard navigation.
- Can be controlled or uncontrolled.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
checked | boolean | 'indeterminate' | 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-state] | 'checked' | 'unchecked' | 'indeterminate' |
[data-disabled] | Present when disabled |
Indicator
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | span |
asChild | boolean | false |
forceMount | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'checked' | 'unchecked' | 'indeterminate' |
[data-disabled] | Present when disabled |