Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick.
Tap the switch, or drag the thumb and flick it to either end.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | undefined | Controlled state, bound with v-model:checked. Leave it out to let the switch keep its own. |
defaultChecked | boolean | false | Initial state when uncontrolled. |
label | string | '' | A label beside the switch, wired to it. |
disabled | boolean | false | Dimmed and inert. |
trackColor | string | '#27272a' | The track while off. |
trackOnColor | string | '#f5f5f5' | The track while on. |
thumbColor | string | '' | The thumb while off. Empty mixes the on colour faintly into the track. |
thumbOnColor | string | '' | The thumb while on. Empty uses the off track colour. |
width | number | 76 | Track width in px. |
height | number | 38 | Track height in px. The thumb and its inset follow. |
radius | number | 19 | Track corner radius in px, capped at half the height. |
speed | number | 50 | Stiffness of the settle spring, 0 to 100. Low is lazy, high is snappy. |
stretch | number | 36 | How much the thumb lengthens with speed, 0 to 100. It narrows to keep its area. |
hoverScale | number | 1.035 | The thumb swells to this on hover. |
colorDuration | number | 320 | The colour cross-fade, in ms. |
ariaLabel | string | - | Accessible name when there is no label. |
id | string | - | Id for the switch button; the label uses it. |
| Event | Description |
|---|---|
change | Emitted with the new boolean on a tap, a drag past the middle or a key. |
update:checked | Emitted alongside change, for v-model:checked. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Space + Enter | Toggles the switch. |
| Escape | Cancels a drag and restores the state from before the press. |