Switch — HTML & CSS

An accessible on/off toggle built on a hidden checkbox. Click, tap, or use the keyboard (Space/Enter toggle, ←/→ set off/on).

Wiring it up in JS (init, events, API, Vue) is on the JavaScript page.

Live example

Theme:

Color

default

danger

info

primary

success

warning

disabled

Size — xsm · sm · default · lg

xsm

sm

default

lg

Shape (no color) — r-0 · default · r-1

r-0

default

r-1

Last ui-switch-change: —

Markup

A .UIsw container wraps a hidden <input type="checkbox">, an optional label, and the slider spans:

<div class="UIsw primary" role="switch" tabindex="0">
  <label class="UIsw-label" for="wifi" id="wifi-label">Wi-Fi</label>
  <input type="checkbox" id="wifi" checked hidden />
  <span class="UIsw-slider"></span>
  <span class="UIsw-slider__on">on</span>
  <span class="UIsw-slider__off">off</span>
</div>

Add the native disabled attribute to the checkbox to render it inert.

Minimal markup

The smallest working Switch — drop the label and the on/off text spans:

<div class="UIsw" role="switch" tabindex="0">
  <input type="checkbox" id="sw" hidden />
  <span class="UIsw-slider"></span>
</div>