When to Use
Example: multi-step survey (multi-select)
- Allowing users to select multiple options from a list (e.g. filters, preferences)
- Providing a single opt-in toggle such as "I agree to terms"
- Parent/child selection patterns that require an indeterminate state
- Use Radio instead when only one option can be selected; use Switch for immediate on/off toggles
Usage Guidelines
DO
Use for multi-select scenarios (filters, bulk actions, preferences) where each option is independent
Don’t
Don't use checkboxes for mutually exclusive selection — use Radio instead
DO
Write labels that describe the selection outcome, not the action (e.g. "Accept terms" not "Click to accept")
Don’t
Don't use checkboxes as instant toggles — use Switch for immediate state changes
DO
For more than 8 options, provide a "Select all" control with Indeterminate state for partial selection. Arrange vertically, one option per row
Don’t
Don't omit labels — screen readers rely on labels to identify a checkbox's purpose
Interaction Behavior
| State | Description |
|---|---|
| Default | Default appearance, not focused |
| Hover | Mouse hover shows semi-transparent state layer around the box |
| Focus | Keyboard focus shows focus ring |
| Disabled | Fully grayed out, pointer-events: none |
Accessibility
| Requirement | Implementation |
|---|---|
| Semantic element | Radix UI @radix-ui/react-checkbox, native role="checkbox" |
| Label association | htmlFor + id — clicking the label equals clicking the box |
| Indeterminate state | checked="indeterminate" |
| Grouping | Related checkboxes grouped with <fieldset> + <legend> |