Inputs
Switch
A binary on/off control for preferences that apply immediately. Spring-back motion and an inner bevel.
Examples
Large 52×28 · Medium 44×24 · Small 36×20 · Off · Disabled
Colour variants (state is also shown by knob position)
States
| Default | Hover | Focus visible | Pressed | Disabled | |
|---|---|---|---|---|---|
| Off | |||||
| On |
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Track | 52×28 / 44×24 / 36×20 | Required |
| 2 | Knob | Springs between positions, 250ms | Required |
| 3 | Label | Visible text, states the setting | Required |
Specifications
| Large | 52 × 28px · radius 14 |
|---|---|
| Medium | 44 × 24px · radius 12 |
| Small | 36 × 20px · radius 10 |
| Active colours | Primary indigo · Success emerald · Secondary purple · Warning amber |
Interaction
| Key | Result |
|---|---|
| Tab | Moves focus |
| Space | Toggles |
| Enter | Toggles (optional) |
| Trigger | Response |
|---|---|
| Click | Toggles and applies immediately |
| Drag | Optional; a click must always work (WCAG 2.5.7) |
| Hover | Track brightens |
Accessibility
role · switch
1.4.1Use of Colour1.4.11Non-text Contrast2.5.7Dragging Movements4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Semantics | <input type="checkbox" role="switch">. It announces as on or off. |
| Label | Name the setting, not the state: Notifications, not Turn on notifications |
| State cue | Knob position and track fill both change, not colour alone |
| Immediate effect | A change must not need a Save. If it does, use Checkbox. |
| Reduced motion | Knob moves without the spring |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use for settings that take effect at once | Do not use inside a form that has a Submit button |
| Do not label it On / Off |
Notes from the Figma file
- Applies immediately. If a change needs a Save, use a Checkbox.