Code example
Common baseline
checkbox role
The element must have role="checkbox" or use a native <input type="checkbox">.
aria-checked state
The checked state must be reflected via aria-checked (true/false/mixed).
Accessible label
Each checkbox must have an associated label via <label>, aria-label, or aria-labelledby.
Toggle with Space
The Space key must toggle the checkbox state.
Group role for related checkboxes
Group related checkboxes with role="group" and a group label.
Visible focus indicator
A clear focus indicator must be shown when the checkbox is focused.
Link error messages
Connect error messages to the checkbox using aria-describedby.
Do not use div/span without role
Custom elements without role="checkbox" are not recognized by assistive technologies.
Do not visually hide native checkbox without alternative
Hiding the native checkbox requires a fully keyboard-accessible custom replacement.
Design system implementations
Additional checks
Connect label with FormControlLabel
Always wrap Checkbox with FormControlLabel to properly associate the label.
Handle indeterminate state
Use the indeterminate prop to represent a partially-selected parent checkbox.
Code sample
Implementation notes
- –MUI Checkbox uses a native input, so basic accessibility is guaranteed.
- –When changing the color prop, verify the 4.5:1 contrast ratio.