Components / Inputs / SwitchOpen in Figma
Switch
ReadyTurns one thing on or off, such as making a record active or inactive.
When to use
- One setting has two states and the change takes effect at once: Active or Inactive, Mandatory or not.
- The record or setting stays listed in both states.
When not to use
| If people need to | Use |
|---|---|
| Tick several options in a list | Checkbox |
| Choose between more than two states | Dropdown or Secondary tab |
| Confirm something that needs a Save | Checkbox |
| Switch between views on a screen | Secondary tab |
Anatomy
TitleActive
- State label · recommended; names the current state in words
- Switch · required
- Track, on · Antz green; knob on the right
- Track, off · Line grey; knob on the left
Variants
| Variant | Purpose | Figma |
|---|---|---|
| With state label | "Active" or "Inactive" before the switch, in a card or section header | Designed |
| Setting row | A 56 white row: setting name on the left, switch on the right | Designed |
States
| State | When | What changes | Figma |
|---|---|---|---|
| On | The thing is active | Antz green track, knob on the right, label "Active" | Designed |
| Off | The thing is inactive | Line grey track, knob on the left, label "Inactive"; an inactive card fades to 75% | Designed |
| Disabled | The setting can't be changed now | Disabled track, label in Hint grey; the knob keeps its side | Temporary rule |
Behaviour
- Tapping the switch or its label flips it at once; there is no Save for a switch.
- The knob slides in 180ms; with reduced motion it jumps.
- Turning something inactive never hides it. Inactive records stay listed and fade to 75%.
- A switch never hides fields people still need to fill.
- If turning off has a cost people can't undo, ask first with a confirm.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Size | 39 × 24 | 39 × 24 |
| Placement | Right end of the row or header | Right end of the row or header |
Content
| Part | Rule |
|---|---|
| State label | "Active" / "Inactive", or another pair that names the state, not the action |
| Setting row label | A noun phrase in sentence case: what is switched, not "Turn on…" |
Do and don't
Inactive
DoSay the state in words beside the switch.
Turn on
Don'tLabel the switch with the action. It reads as the opposite state.
Label
DoUse a switch when the change happens at once.
Label
Save
Don'tPut a switch in a form that only applies on Save. Use a checkbox.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Track | Size | ||
| Corners | |||
| Track, on | Fill | ||
| Track, off | Fill | ||
| Track, disabled | Fill | ||
| Knob | Size | ||
| Fill | |||
| Inset | |||
| State label | Type | ||
| Colour | |||
| Gap to switch | |||
| Setting row | Height | ||
| Fill | |||
| Corners | |||
| Padding | |||
| Label | |||
| Inactive card | Opacity | ||
| Motion | Knob slide |
Accessibility
- Announced as a switch with its name and state: "Status, Active, on".
- The state is shown by the knob position and the state label, not by the track colour alone.
- The touch area is at least 44 × 44 around the 39 × 24 track; in a setting row the whole row flips it.
- White knob on the off track scores 1.6 for readability, so the knob side and the label carry the state.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Switch set to 39 × 24 with an 18 knob; state label "Active / Inactive" 14 Medium. |
| 26 Oct 2026 | Disabled added as a temporary rule until designed in Figma. |