Example: multi-step survey (multi-select)
Use for multi-select scenarios (filters, bulk actions, preferences) where each option is independent
Don't use checkboxes for mutually exclusive selection — use Radio instead
Write labels that describe the selection outcome, not the action (e.g. "Accept terms" not "Click to accept")
Don't use checkboxes as instant toggles — use Switch for immediate state changes
For more than 8 options, provide a "Select all" control with Indeterminate state for partial selection. Arrange vertically, one option per row
Don't omit labels — screen readers rely on labels to identify a checkbox's purpose
| 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 |
| 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> |