Toggle
Switches a setting on or off, taking effect immediately.
Try it
Click it, or tab to it and press Space or Enter.
Size
Label
Disabled
<WildToggle
v-model="enabled"
size="md"
label="Send SMS alerts"
/>When to use
- Use a toggle for a setting that takes effect the moment it’s flipped.
- Use it for one setting at a time, each with its own label.
Don’t use it
- For an option that waits for Save. Use a checkbox, so nobody wonders whether their change took effect.
- To pick one of several. Use a radio group.
Anatomy
A track and a knob, with an optional label to the right. The label is part of the target.
Send SMS alertsInclude archived sites
<WildToggle v-model="enabled" label="Send SMS alerts" />Sizes
Two sizes, each with 2px between the knob and the track. The default is md.
md · 44×24 / knob 20
sm · 36×20 / knob 16
States
off
on
hover
pressed
focus
disabled · off
disabled · on
Accessibility
A screen reader hears the label, then on or off. A toggle with no visible label needs ariaLabel.
| Key | What it does |
|---|---|
| Tab | Moves focus to the toggle. A disabled one is skipped. |
| Space / Enter | Flips it. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| on | boolean | — | Whether the setting is on. |
| onChange | (on: boolean) => void | — | Makes it operable. Called with the next value. |
| label | string | — | Text to the right of the track. |
| size | 'md' | 'sm' | 'md' | 44×24 or 36×20. |
| disabled | boolean | false | Dims it to 50% and leaves the tab order. |
| state | 'rest' | 'hover' | 'active' | 'focus' | — | Forces a frame, for static examples. |
| ariaLabel | string | — | Accessible name when there is no label. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --radius-full | 9999px | Track and knob. |
| --color-primary | #00AEEF | Track when on. |
| --color-primary-hover | #0ABEFF | Track when on, on hover. |
| --color-primary-active | #1877F2 | Pressed track when on, and the focus ring. |
| --global-neutral-grey-900 | #7F7D83 | Track when off, 4.1:1. A disabled switch keeps a lighter grey. |
| --global-neutral-grey-1000 / -1100 | #4F4D55 / #2D2B32 | Off track on hover and press. |
| --ease-in-out | cubic-bezier(.4,0,.2,1) | Knob travel, 150ms. |
| (no token) | 2px gap, 2px ring | Keyboard focus, outside the track. |