Switch

Toggle switch for on/off settings. The one moving part in this system — everything else transitions color or border, never position.

Basic

role="switch" is the correct ARIA role for a toggle, so it doubles as the attribute that tells Switch’s input[type="checkbox"] apart from a plain Checkbox — real accessibility markup doing double duty as a style hook. The track and thumb still need .switch, one sanctioned fallback class: the thumb’s independent position and transition need a second element, more than appearance: none plus pseudo-elements on the input itself can cleanly carry.

<label class="switch">
  <input type="checkbox" role="switch" checked="" />
  <span></span>
  Dark mode
</label>
<label class="switch">
  <input type="checkbox" role="switch" />
  <span></span>
  Weekly digest
</label>

Disabled

<label class="switch">
  <input type="checkbox" role="switch" checked="" disabled="" />
  <span></span>
  Always on for this plan
</label>

API