Checkbox
Accessible checkbox input with indeterminate state support and form integration
Checkbox
Checkbox allows users to select one or multiple options from a list. Supports indeterminate state, descriptions, icons and more.
Basic usage
Use checked and onCheckedChange to create fully controlled checkboxes.
Current selection
Live values from the checkboxes on the left
States
Use disabled for non-interactive options and indeterminate for partially selected groups.
Project permissions
Disabled
Sizes
Adjust checkbox size with the size prop.
Color variants
Use semantic colors to reflect status or meaning.
With description
Add extra context with description.
Checkbox list in a card
Combine checkboxes with cards to build settings panels and preference forms.
Notification preferences
Choose which activity triggers email notifications.
Usage Guidelines
When to Use
- Multi-select options
- Terms acceptance
- Feature toggles
- Bulk selection
Accessibility
- Proper checkbox role
- Keyboard space/enter to toggle
- Focus ring visible
Performance
- Minimal re-renders
- CSS-only states
Common Mistakes
- Using for mutually exclusive options (use Radio)
- Missing indeterminate for parent checkboxes
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface
Hybrid input combining text search with dropdown selection, supporting filtering, custom rendering, and creation flows