Role and semantics
Section titled “Role and semantics”Toggle is a native <button> rendered by Base UI Toggle; it reports its pressed state through aria-pressed. On an icon-only Toggle, label is required at type level and set as aria-label.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves focus to the toggle; skips it when disabled. |
| Enter, Space | Switches the pressed state. |
Inside a ToggleGroup the arrow keys are used too; see the ToggleGroup accessibility tab.
On keyboard focus a 2 px color-focus-ring ring appears 2 px outside the box (focus-visible).
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
<Toggle icon="bold" label="Bold" /> |
“Bold, toggle button, not pressed” |
| After pressing | “Bold, toggle button, pressed” |
Contrast
Section titled “Contrast”The pressed state does not rely on colour alone: fill and border change together. The color-border-selected border has at least 3:1 contrast on the background.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Toggle meets it | What the product team does |
|---|---|---|
| 1.4.1 Use of colour | The pressed state shows through fill and border. | Do not remove the border with className. |
| 1.4.11 Non-text contrast | Selected border at 3:1. | Check the pair when you change brand tokens. |
| 4.1.2 Name, role, value | aria-pressed and a name. |
Do not change the label with the state. |
| 2.5.8 Target size (minimum) | The smallest box is 32 × 32 px. | Leave space between toggles. |