Switch

Toggle switch for on/off states. Supports both semantic HTML and class-based approaches.

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.

Semantic switch (recommended)

Use role="switch" for better accessibility and semantic HTML. Labels automatically use flex layout when they contain switches:

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

Class-based switch (legacy)

The traditional class-based approach is still supported:

<label class="af-switch">
  <input type="checkbox" checked />
  <span class="af-switch-slider">
  </span>
</label>

States

<!-- Semantic approach -->
<input type="checkbox" role="switch" checked />
<input type="checkbox" role="switch" />
<input type="checkbox" role="switch" disabled />
<!-- Class-based approach -->
<label class="af-switch">
  <input type="checkbox" checked />
  <span class="af-switch-slider">
  </span>
</label>

Live example

Semantic switch (recommended)

Enable notificationsDark modeDisabled option

Class-based switch (legacy)

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;
}