How to build an accessible Checkbox in React
Renders a native <input type="checkbox"> wrapped in a <label>, so role, checked/indeterminate state, Space activation, and label association come from the platform; the indeterminate visual is set on the DOM node since it is a property not an attribute
When to use a Checkbox
- Selecting zero or more options from a list where each choice is independent
- A single opt-in within a form (accept terms, subscribe) submitted alongside other fields
- A "select all" control that needs an indeterminate (partial) state
When not to use it
- A binary setting that applies immediately on change — use Toggle
- Choosing exactly one option from a mutually exclusive set — use Radio
Keyboard interactions
Role checkbox, verified at WCAG 2.2-AA.
Space
Common mistakes
Avoid: <Checkbox label="Dark mode" /> that flips a setting live
Prefer: <Toggle label="Dark mode" />
Checkbox signals a form value to be submitted; Toggle signals an immediate on/off state change
Avoid: Two checkboxes for one either/or choice
Prefer: Use Radio for mutually exclusive options
Independent checkboxes let the user select both or neither, which a single exclusive choice should not allow
Example
<Checkbox label="Accept terms" />