Switch

The switch component (.switch) is a toggle control — the class-based equivalent of an on/off checkbox styled as a sliding track-and-thumb, used for settings that take effect immediately rather than requiring a form submission. It wraps a real, visually-hidden native <input type="checkbox" role="switch"> so keyboard interaction, screen readers, and form submission all work natively.

<label class="switch">
  <input type="checkbox" class="switch-input" role="switch" checked aria-label="Notifications">
  <span class="switch-track" aria-hidden="true"><span class="switch-thumb"></span></span>
</label>