Build Assets
UI Component

Toggle Switch

Binary on/off control for settings that take immediate effect.

Platform: bothTags: toggle, switch, boolean, settings, form

Purpose

Controls a binary setting that applies immediately without a save/submit step. Visually distinct from checkboxes — use toggles for instant-effect settings, checkboxes for form selections submitted later.

Anatomy

  • Track: 40×24px pill, color shifts on state
  • Thumb: 20px circle, 2px inset from track edge
  • Label: 14px text to the right or left of track
  • Optional description: 13px secondary text below label

States

  • Off: grey track, left-positioned thumb
  • On: accent-color track, right-positioned thumb, smooth slide transition (200ms)
  • Focused: visible focus ring around track
  • Disabled: 40% opacity, cursor not-allowed
  • Loading: thumb replaces with spinner while action pending

Tokens

spacing

trackWidth: 40pxtrackHeight: 24pxthumbSize: 20pxlabelGap: 10px

Do

  • Use for settings that take immediate effect — no save button needed
  • Label should describe the ON state: "Email notifications" not "Notification toggle"
  • Show loading state when toggle triggers an async operation
  • Group related toggles under a section heading

Don't

  • Use toggles inside forms that require Save/Submit — use checkboxes
  • Use ambiguous labels where ON/OFF meaning is unclear
  • Place toggles in tables without enough horizontal space for the track
  • Trigger destructive or irreversible actions with a toggle alone — require confirmation

Accessibility

  • role="switch" with aria-checked="true/false"
  • Use a <button> element, not a div
  • Label must be programmatically associated
  • Space/Enter toggles the state
  • Visible focus ring required

Code Example

<button role="switch" aria-checked="true" 
  aria-labelledby="email-label">
</button>
<label id="email-label">Email notifications</label>

Source Topic

practical ui

Usability First

Minimise risk, cognitive load, and interaction cost before adding anything else