COMPONENTS

Switches

A switch class styles a native checkbox as an on/off control. Checked state, keyboard activation, form submission and disabled behavior remain native.

Usage

Markup: input.switch[type=checkbox] inside a label

Behaviour: Checked state, keyboard activation and submission remain native.

  • Use switches for boolean settings. Keep a stable visible label; Space toggles the focused checkbox. Optional role="switch" communicates on/off semantics while checked remains the native input state.
  • Place the checkbox inside its label for a comfortable label target. Add aria-describedby for explanatory text. Do not maintain aria-checked manually on a native checkbox.
  • Size, shape, accent, borders and motion follow the parent. Switches keep opaque control backing, including inside a glass section. Reduced-motion preferences stop thumb transitions.

Component API and styling module · Inherited appearance settings

A native on/off setting

The label names the setting and activates its checkbox.

HTMLSelect text to copy
<label>
  <input class="switch" type="checkbox" role="switch"
         name="email-updates" checked>
  Email updates
</label>

Help and disabled settings

Associated help text explains the setting. Native disabled prevents changes.

Receive one summary every Monday.
HTMLSelect text to copy
<div class="form-group" data-shape="pill">
  <label>
    <input class="switch" type="checkbox" role="switch"
           name="weekly-summary" aria-describedby="weekly-summary-help">
    Weekly summary
  </label>
  <small id="weekly-summary-help">Receive one summary every Monday.</small>
</div>
<label>
  <input class="switch" type="checkbox" role="switch"
         name="managed-backups" checked disabled>
  Backups enabled by your administrator
</label>

Shared defaults

Set accent and size on the parent; controls only need the switch class.

HTMLSelect text to copy
<section data-accent="teal" data-size="large" data-shape="pill">
  <label><input class="switch" type="checkbox" role="switch" checked> Notifications</label>
  <label><input class="switch" type="checkbox" role="switch">Activity emails</label>
</section>

A sized labelled switch

The group label and switch consume the size setting once. A local switch size remains an independent override.

HTMLSelect text to copy
<section data-size="large">
  <div class="form-group">
    <label><input class="switch" type="checkbox" role="switch" checked> Email notifications</label>
  </div>
  <div class="form-group">
    <label><input class="switch" type="checkbox" role="switch" data-size="small"> A smaller local switch</label>
  </div>
</section>