Switches

Toggle controls that share a native checkbox at the markup level, with a switch visual.

  • The API is class="switch". Use role="switch" for ARIA correctness.
  • The visual state tracks the native checked attribute. No JavaScript is required.
  • For strict ARIA correctness, keep aria-checked in sync. This is an enhancement, not the baseline.
<!-- Default: native state, no JS required. -->
<input class="switch" type="checkbox" role="switch" checked />
<!-- Enhancement: keep aria-checked in sync. -->
<input class="switch"
       type="checkbox"
       role="switch"
       aria-checked="true"
       checked
       onchange="this.setAttribute('aria-checked', this.checked)" />