Role and semantics
Section titled “Role and semantics”Switch renders an element with role="switch" through Base UI Switch, plus a hidden <input> for forms. The switch is named by the <label> around it; the state is reported through aria-checked.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves focus to the switch; skips it when disabled. Focus stays while it saves. |
| Space | Toggles the state; has no effect while loading. |
On focus a 2 px color-focus-ring ring appears 2 px outside the track (focus-visible).
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Off | “Option label, switch, off” |
| While saving | “Saving” once, as a polite announcement |
Contrast
Section titled “Contrast”The color-border-strong fill of an off track has at least 3:1 contrast on the background. The thumb stands off the track with shadow-raised.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Switch meets it | What the product team does |
|---|---|---|
| 1.4.11 Non-text contrast | Track and thumb at 3:1. | Do not lighten the track with className. |
| 2.5.8 Target size (minimum) | Track and label are one click area. | Never leave the label empty. |
| 4.1.2 Name, role, value | role="switch" and aria-checked. |
Do not write “on” or “off” in the label. |
| 4.1.3 Status messages | Saving is announced once through role="status". |
On failure, revert the state and say so. |