Component · Actions · 04
Toggle
Toggle = a 44x26 track that applies a setting instantly, with no save button, unlike a checkbox in a form.
What is a Toggle?
A toggle changes a setting the moment it moves. Name the track, the knob travel, and the state that is announced.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- The text that names a field; keep it short and place it above the input.
- A control that cannot be interacted with; show it dimmed and non-focusable.
States
Tap a property to highlight it in the preview.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- The keyboard-focused state — a visible ring or border change. Never remove it.
- A control that cannot be interacted with; show it dimmed and non-focusable.
Anatomy
These are the parts to name in your prompt.
- 01 Track
- 02 Knob
- 03 Label
- 04 Description
When to use
- Settings that take effect immediately — dark mode, notifications
- Per-row feature flags in an admin table
- Preferences that persist without a save button
Avoid when
- The change needs a confirmation or a save step — use Checkbox
- Two mutually exclusive options — use Select or Radio
- The label is longer than one line
Green means “on and already saved” — if the change waits for a save button, this is a checkbox wearing a switch.
See also
Create a toggle component.
STYLE
- 44x26 track, 13px radius, 22px white knob with 2px inset
- off track #E5E5EA, on track #34C759
- knob travels 18px with a 160ms ease
- label sits left of the track, description under it in 12px
STATES
- off, on, focus-visible 2px accent ring on the track, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui