Skip to content

Find what you need, instantly

Search components, ARIA roles & attributes, and WCAG criteria.

All roles

switch

Widget role

A control representing an on/off value, like a light switch, with its state exposed through aria-checked as true or false. It's similar to a checkbox but conveys an immediate on/off toggle rather than a selection to be submitted later. It responds to Space and Enter and should carry a clear on/off label.

Used on
A button-like control representing an on/off value.
Required properties
  • aria-checkedtrue or false — switches have no mixed state
Accessible name
Required, via a visible label + aria-labelledby, or aria-label.
Used by components
Example
role="switch"
<button role="switch" aria-checked="true"
  aria-labelledby="wifi-label">…</button>
See a live, tested example on the Switch page