# Switch

Turns one setting on or off and applies the change at once.

* Kind: component
* Page: https://design.werklist.com/components/switch
* Version: 2.1.2

## When to use it

* A setting that takes effect when flipped.
* A row in a list of settings.
* An option on one item that applies at once, such as whether a job ad accepts applications.

## When not to use it

* A change that waits for Save: use Checkbox.
* More than two states: use Radio or SegmentedControl.
* A toolbar: use a toggle button, an IconButton or Button with aria-pressed.

## Rules

* A switch saves the moment it is flipped. A panel with a Save button uses checkboxes.
* The label names what on means, never its opposite: Show the salary, not Hide the salary.

## Anatomy

* Track: 40 by 24 px, fully rounded, no edge (--radius-full)
* Knob: 20 px, inset 2 px, white in both themes, with a small shadow
* Knob travel: 16 px
* Off track: rgba(13, 18, 40, 0.12) in light, rgba(255, 255, 255, 0.18) in dark
* On track (--brand-blue)
* Label: 14 px on 20 px (--text)
* Description: 13 px on 18 px (--text-muted)
* Settings row: at least 44 px high, 12 px above and below, 16 px or more between the words and the switch (--space-3)
* Target on a coarse pointer: 44 px around the track when the switch stands alone
* Focus ring: 2 px, offset 2 px (--focus-ring)

## States

* off: gray track, white knob at the start
* on: brand track, white knob at the end (--brand-blue)
* focus visible: ring outside the track (--focus-ring)
* saving: the new position shows at once, marked busy until the save returns
* failed: back to the old position, with an error line under the row (--error-ink)
* disabled: the whole switch at half strength, in place

## Keyboard

* Tab: Moves to the switch
* Space: Flips the switch
* Enter: Flips the switch

## Accessibility

* A button with role switch and aria-checked.
* Named by its visible label. The description is attached with aria-describedby.
* A switch without a visible label takes a name that includes its row, such as Board admin, Ana Horvat.
* On and off differ in fill and in the position of the knob.
* With reduced motion the knob moves without sliding.

## Content

* A noun or a short phrase naming what on means, such as Show the salary.
* No Turn on, no Enable, no question.
* Sentence case, no full stop.

## Tokens

* --text-muted
* --text
* --brand-blue
* --error-ink
* --radius-full
* --space-3
* --space-4
* --focus-ring
* --duration-fast
* --ease-standard