Checkbox
Binary choice input for forms. Supports checked, unchecked, and indeterminate states with full keyboard navigation and RTL support.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
With Label
tsx
Indeterminate State
tsx
Disabled State
tsx
Controlled Component
Status: Unchecked
tsx
In Forms
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | 'indeterminate' | false | The controlled checked state of the checkbox |
defaultChecked | boolean | false | The default checked state (uncontrolled) |
onCheckedChange | (checked: boolean | "indeterminate") => void | undefined | Event handler called when the checked state changes |
disabled | boolean | false | Disables the checkbox |
required | boolean | false | Marks the checkbox as required |
name | string | undefined | The name of the checkbox for form submission |
value | string | on | The value of the checkbox for form submission |
Accessibility
Keyboard Navigation
- Tab: Move focus to/from checkbox
- Space: Toggle checkbox state
Always Use Labels
Always pair checkboxes with labels using the htmlFor and id attributes. Clicking the label toggles the checkbox, improving usability.
Screen Readers
The checkbox role is automatically announced. The label provides context about what the checkbox controls.
Indeterminate State
The indeterminate state is announced as "mixed" by screen readers, indicating partial selection.
RTL Considerations
Checkboxes automatically support RTL layout. The checkbox and label maintain proper spacing and alignment in both directions.