COMPONENTS / TOGGLE

Toggle

Binary switch for a setting that takes effect immediately. Built on a native checkbox with appearance:none — the semantics stay, only the paint changes. If the choice needs a submit button, use a checkbox instead.

VERSION1.0.0

TOKENS9 CONSUMED

CONTRASTAAA

DEPENDENCIESNONE

01 / LIVE INSTANCES — ALL STATES

SPECIMENS ARE LIVE — CLICK THEM

STATE

SPECIMEN

STATE

SPECIMEN

OFF

DARK MODE

HOVER

DARK MODE

FOCUS-VISIBLE

DARK MODE

DISABLED OFF

DARK MODE

DISABLED ON

DARK MODE

LOADING / ERROR: N/A — A TOGGLE THAT CAN FAIL OR WAIT SHOULD BE A BUTTON WITH FEEDBACK, NOT A SWITCH.

02 / ANATOMY — EXPLODED VIEW

01 TRACK
--s8 × --s4 · --line-strong BORDER · --r2

02 KNOB
--s3 SQUARE · TRANSLATES --s4 WHEN ON

03 LABEL
--font-mono · --t1 · UPPERCASE · GAP --s3

DARK MODE

FIG. T-01 — ON STATE INVERTS: TRACK FILLS --fg, KNOB PAINTS --bg. MOTION IS TRANSFORM ONLY, --d1.

03 / TOKENS CONSUMED

PROPERTYTOKENVALUE

TRACK SIZE--s8 × --s432 × 16PX

TRACK BORDER--line-strong1PX

TRACK RADIUS--r24PX — HARD MAX

KNOB SIZE--s312PX

KNOB / OFF--fg-muted#6C6A64

TRACK / ON--fgINK FILL

KNOB / ON--bgPAPER

LABEL--font-mono / --t112PX UPPERCASE

MOTION--d1 / --easeTRANSFORM 120MS

04 / CODE — COPY-READY

<label class="toggle">
  <input type="checkbox" role="switch">
  <span class="toggle__label">DARK MODE</span>
</label>

/* CSS — components.css / TOGGLE
   input is a native checkbox with
   appearance:none; the knob is ::before,
   moved with transform on :checked. */

05 / RESPONSIVE BEHAVIOUR

≥1024INLINE WITH LABEL. SETTINGS LISTS: ONE PER ROW, HAIRLINE BETWEEN.

640–1023UNCHANGED.

<640WHOLE LABEL ROW IS THE HIT AREA — THE <LABEL> WRAPPER DELIVERS 44PX FOR FREE.

06 / ACCESSIBILITY

ELEMENTNATIVE CHECKBOX INSIDE <LABEL> · ROLE="SWITCH" FOR SCREEN READERS.

ARIANONE BEYOND ROLE — CHECKED STATE IS NATIVE.

FOCUSGLOBAL RING ON THE CONTROL, NOT THE LABEL.

CONTRASTTRACK BORDER 18.2:1 · ON-STATE FILL 18.2:1 AAA · STATE NEVER CARRIED BY COLOR ALONE — KNOB POSITION IS THE SIGNAL.