Checkbox
Checkbox with spectre styling built on Radix UI Checkbox. Supports labels, controlled and uncontrolled checked state, and disabled styling.
Basic
Preview
Default Checked
Preview
Disabled
Preview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Label text displayed next to the checkbox. |
| defaultChecked | boolean | false | Default checked state for uncontrolled usage. |
| checked | boolean | - | Controlled checked state. |
| onCheckedChange | (checked: boolean) => void | - | Callback fired when the checked state changes. |
| disabled | boolean | false | Whether the checkbox is disabled. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Checkbox which provides full WAI-ARIA checkbox pattern compliance
- Label is associated with the checkbox for screen reader support
- Togglable via
Spacekey when focused - Checked state is conveyed to assistive technology via
aria-checked - Disabled state prevents interaction and is communicated to assistive technology