Code example
Common baseline
Use role="switch"
Use role="switch" with aria-checked to indicate the on/off state.
Connect a label
A label describing the toggle's purpose must be associated with it.
Keyboard operable
The Space key must activate the toggle.
Announce state change
State changes must be communicated to screen readers.
Provide on/off text
Display the state as text (On/Off) in addition to color.
44×44px touch target
Ensure a sufficient touch area on mobile.
Do not distinguish state with color alone
Green/grey alone does not communicate on/off to color-blind users.
Do not use a checkbox to implement a switch
A checkbox is semantically different from a switch even if styled the same. Use role="switch".
Design system implementations
Additional checks
Use FormControlLabel to connect a label
Pair MUI Switch with FormControlLabel and use its label prop to associate the label. When used standalone, add aria-label via slotProps.input.
ToggleButtonGroup requires aria-label
Add aria-label to ToggleButtonGroup to describe the group purpose, and add aria-label to each ToggleButton.
role="switch" is not applied automatically
MUI Switch renders an <input type="checkbox"> internally. role="switch" is not applied automatically — add it via slotProps.input if semantic switch behavior is needed.
Code sample
Implementation notes
- –MUI Switch renders an <input type="checkbox"> internally.
- –FormControlLabel automatically connects the label to the input via aria association.
- –For ToggleButtonGroup with exclusive={true}, aria-pressed is managed automatically per button.