Skip to main content Curbcut by Baseline
Menu
All components

Switch

An instant on/off — a checkbox with switch semantics and a text state.

Show the markup
<div class="cc-switch" data-cc-switch>
  <input type="checkbox" id="ex-switch" checked>
  <label for="ex-switch">Email me when minutes are posted</label>
  <span class="cc-switch__state" aria-hidden="true">On</span>
</div>

Accessibility

  • A real checkbox under the hood; the script adds role="switch", which exposes the native checked state — no aria-checked to go stale after a form reset.
  • The On/Off text means state is never conveyed by color or position alone (1.4.1).
  • A switch takes effect immediately. If the choice needs a Save button, use a Checkbox.