Switch

A switch turns one setting on or off, and the change applies at once. Nothing waits for a Save button.

What it is

Accept applicationsThe job ad takes new applications on werklist.com.

Show the salaryCandidates see the monthly pay on the ad.

Notify me of each new application

Accept applicationsThe job ad takes new applications on werklist.com.

Show the salaryCandidates see the monthly pay on the ad.

Notify me of each new application

When to use it

Use a switch for a setting that takes effect as soon as it is flipped, such as whether a job ad accepts applications.

If the change waits for a Save button, use a checkbox: a switch in that panel looks saved the moment it is flipped, and it is not. For a choice between more than two states, use radio buttons or a segmented control. On a toolbar, a toggle button such as Assigned to me does the same job in less room.

Anatomy

Off is a gray track with the white knob at the start. On fills the track with brand blue and moves the knob to the end, so the state shows in position as well as in color.

Track: 40 by 24 px, fully rounded, no edge; --radius-full
Off track: gray
On track: brand blue; --brand-blue
Knob: 20 px, white, 2 px from the edge
Knob travel: 16 px
Label: 14 px on a 20 px line; --text
Description: 13 px on an 18 px line; --text-muted
Settings row: at least 44 px high

States

A switch does not change under the pointer. While a change saves, it already shows the new position.

Off
On
Focus
Saving
Disabled off
Disabled on

Off
On
Focus
Saving
Disabled off
Disabled on

Focus ring: 2 px, 2 px outside the track; --focus-ring
Saving: the new position at once, busy until the save returns
Disabled: the whole switch at half strength, in place

Behavior

The knob slides in 150 milliseconds while the track fills. With reduced motion, the switch changes state without sliding.

The change saves as soon as it is made, and the new position shows straight away, even on a slow connection. If saving fails, the switch goes back to where it was and a message under the row says what went wrong.

Tab reaches the switch and Space or Enter flips it. A click on the label flips it too.

Where the label goes

In a list of settings, the label starts the row and the switch ends it. Among other controls, such as the options of an offer to a candidate, the switch comes first and its label follows.

A switch without words of its own, such as one in each row of a list of board admins, takes a name that includes the row: Board admin, Ana Horvat.

Show the salary
In a list of settings
Ask for a signature
Among other controls

Writing the label

Name the setting with a noun or a short phrase that says what on means: Show the salary, Ask for a signature. Never name the opposite, such as Hide the salary: switching it on would take something away.

Leave out Turn on and Enable, since the switch already says that, and do not write the label as a question.

NextSegmented control

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

JSON

{
  "title": "Switch",
  "path": "/components/switch",
  "url": "https://design.werklist.com/components/switch",
  "text": "https://design.werklist.com/agent/components/switch",
  "summary": "Turns a setting on or off and applies the change the moment it is flipped.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Switch",
  "purpose": "Turns one setting on or off and applies the change at once.",
  "use": [
    "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."
  ],
  "avoid": [
    "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."
  ],
  "anatomy": [
    {
      "part": "Track",
      "measure": "40 by 24 px, fully rounded, no edge",
      "token": "--radius-full"
    },
    {
      "part": "Knob",
      "measure": "20 px, inset 2 px, white in both themes, with a small shadow"
    },
    {
      "part": "Knob travel",
      "measure": "16 px"
    },
    {
      "part": "Off track",
      "measure": "rgba(13, 18, 40, 0.12) in light, rgba(255, 255, 255, 0.18) in dark"
    },
    {
      "part": "On track",
      "token": "--brand-blue"
    },
    {
      "part": "Label",
      "measure": "14 px on 20 px",
      "token": "--text"
    },
    {
      "part": "Description",
      "measure": "13 px on 18 px",
      "token": "--text-muted"
    },
    {
      "part": "Settings row",
      "measure": "at least 44 px high, 12 px above and below, 16 px or more between the words and the switch",
      "token": "--space-3"
    },
    {
      "part": "Target on a coarse pointer",
      "measure": "44 px around the track when the switch stands alone"
    },
    {
      "part": "Focus ring",
      "measure": "2 px, offset 2 px",
      "token": "--focus-ring"
    }
  ],
  "states": [
    {
      "name": "off",
      "change": "gray track, white knob at the start"
    },
    {
      "name": "on",
      "change": "brand track, white knob at the end",
      "tokens": [
        "--brand-blue"
      ]
    },
    {
      "name": "focus visible",
      "change": "ring outside the track",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "saving",
      "change": "the new position shows at once, marked busy until the save returns"
    },
    {
      "name": "failed",
      "change": "back to the old position, with an error line under the row",
      "tokens": [
        "--error-ink"
      ]
    },
    {
      "name": "disabled",
      "change": "the whole switch at half strength, in place"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the switch"
    },
    {
      "key": "Space",
      "action": "Flips the switch"
    },
    {
      "key": "Enter",
      "action": "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"
  ],
  "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."
  ]
}

Raw file: https://design.werklist.com/agent/components/switch