Skip to content

Switch

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

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