toggle-switch
Installation
SKILL.md
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
- Clear on/off visual (color change + position change)
- Label on the left (describes what it controls)
- On = right, Off = left (reading direction)
- On state: brand/accent color. Off state: gray.
- Optional: show On/Off text inside toggle for clarity
- Size: 40-48px wide, 24px tall minimum for touch
- Transition: 200ms ease