Switch

Toggle switch for on/off states. Use role="switch" on a checkbox inside a label.

Track height uses --af-switch-height (defaults to --af-choice-size, 1.5rem). Width is height × (1 + --af-switch-width-ratio) (ratio default 0.8). Checkbox and radio use the same --af-choice-size so the three stay visually aligned — see Tokens.

Basic switch

Labels automatically use flex layout when they contain switches:

Enable notifications Dark mode Disabled option

<label>
  <input type="checkbox" role="switch" checked />
  <span>Enable notifications</span>
</label>

States

<div class="af-stack af-gap-sm">
  <label>
    <input type="checkbox" role="switch" checked />
    <span>On</span>
  </label>
  <label>
    <input type="checkbox" role="switch" />
    <span>Off</span>
  </label>
  <label>
    <input type="checkbox" role="switch" disabled />
    <span>Disabled</span>
  </label>
</div>

Sizing tokens

:root {
  --af-choice-size: 1.5rem; /* checkbox, radio, default switch height */
  --af-switch-height: var(--af-choice-size);
  --af-switch-width-ratio: 0.8;
  --af-switch-thumb-inset: 2px;
}