Checkbox
View on StorybookStorybookBinary 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.
LTR (English)
RTL (العربية)
Use Cases
Terms and conditions acceptance
Multi-select filters
Bulk action selection in tables
Feature toggles in settings
Best Practices
Do
- ✓ Always pair with a Label for accessibility
- ✓ Use indeterminate state for parent checkboxes in tree selections
- ✓ Group related checkboxes visually
Don't
- ✗ Don't use for binary toggles — use Switch instead
- ✗ Don't use for single-choice selections — use RadioGroup
- ✗ Don't place checkboxes too close together on mobile