Toggle / Switch
A control for switching between two states (on/off)
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsUse 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".
Additional checks
Use FormControlLabel to connect a label
Pair MUI Switch with FormControlLabel to associate it with a label.
Add aria-label via inputProps when used standalone
When used without FormControlLabel, add an aria-label via inputProps.
Code sample
Implementation notes
- –MUI Switch uses an <input type="checkbox"> internally.
- –role="switch" is not applied automatically — add it via inputProps.
- –Re-verify contrast ratios when changing the color prop.