Switch
An on/off control that takes effect straight away, drawn as a track with a knob that slides across. For settings, not for answers in a form that still has to be sent.
Preview
When to use
- For a setting that applies the moment it flips: dark mode, notifications, a feature flag.
- In a list of settings, each with a label and a line of description.
Reach for something else
- For an option that only counts once a form is submitted: that is a Checkbox.
Anatomy
- 1
Track
A pill, grey when off, brand colour when on.
- 2
Knob
A white circle that slides to the on side.
- 3
Label
Names the setting, not the state: Email alerts, not On.
- 4
Description
Optional line explaining what changes.
States
Off
Grey track, knob to the start.
On
Brand track, knob to the end.
Focus
A ring around the track.
Disabled
Muted in either position.
Accessibility
- A button with role="switch" and aria-checked, or an <input type="checkbox" role="switch">.
- Space toggles it; Enter does too when it is a button.
- The label names it, so the state is announced as on or off rather than drawn only in colour.
Source
The Switch is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block