Toggle Switch

Toggle switch design, on/off states, and toggle vs checkbox decisions.

dragoon0x de118d1 894 B Updated

File contents

Toggle Switch Design

Toggle vs Checkbox

Toggle Checkbox
Immediate effect (no save button) Requires form submission
Binary on/off One of many selections
Settings, preferences Forms, filters
One at a time Groups of options

Design Rules

  1. Clear on/off visual (color change + position change)
  2. Label on the left (describes what it controls)
  3. On = right, Off = left (reading direction)
  4. On state: brand/accent color. Off state: gray.
  5. Optional: show On/Off text inside toggle for clarity
  6. Size: 40-48px wide, 24px tall minimum for touch
  7. Transition: 200ms ease

Accessibility

  • role="switch" with aria-checked
  • Keyboard: Space/Enter to toggle
  • Label associated via for attribute
  • Focus ring visible

dragoon0x/everything-design-taste/tree/main/skills/toggle-switch commit de118d16af

Frequently asked questions

npx skillmds@latest add dragoon0x/toggle-switch