Checkbox
A checkbox pattern for selecting or deselecting items
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemscheckbox 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.
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.