toggle-switch-patterns
Installation
SKILL.md
Toggle Switch Patterns
Choosing the Right Control
| Need | Control | Why |
|---|---|---|
| On/off, immediate effect | Toggle switch | Visual, instant feedback |
| On/off, needs save | Checkbox | Part of a form, explicit submission |
| One from few options | Radio group | All options visible |
| One from many options | Dropdown | Space-efficient |
| Multiple from few | Checkbox group | All options visible |
| Multiple from many | Multi-select dropdown | Space-efficient |
Toggle Switch Rules
- Takes effect immediately. No save button needed.
- Label describes the ON state. "Enable notifications" (not "Disable notifications").
- Show current state clearly. Color change + position + optional ON/OFF text.
- Minimum size: 48px wide, 24px tall (larger on mobile).