Segmented control

A segmented control joins two to five short values in one row, and one of them is always chosen. It changes the view around it, or a setting with a few values, the moment it is pressed.

What it is

Assign new applications

When to use it

Use it for closely related values that change the same thing, such as the period of the placements dashboard or who picks up new applications. The choice applies at once.

To move to another page or section, use tabs or links, and to run an action, use buttons. When there are more than five values, or the labels need more than a word or two, use radio buttons or a select.

Anatomy

Each segment is as wide as its word, with room at each side. The chosen one is solid brand blue with white words. A gradient would make it read as a button to press, not a value that is set.

Track height with a mouse: 36 px
Track height on touch: 48 px
Space around and between segments: 2 px
Track fill: control gray; --surface-control
Track radius: 10 px
Segment height: 32 px, 44 px on touch
Segment radius: 8 px; --radius-lg
Segment width: its word and 12 px at each side, at least 44 px; --space-3
Label: 13 px on a 20 px line, weight 700; --text-muted
Chosen segment: brand blue with white words; --brand-true

States

The words that are not chosen are gray, and darken under the pointer.

When the whole control is disabled, every segment fades and the chosen one keeps its blue, so the value still shows. A single segment is never disabled: a value that cannot be chosen leaves the control.

At rest
Pointer over Month
Keyboard focus on Week
Disabled

At rest
Pointer over Month
Keyboard focus on Week
Disabled

Label under the pointer: full ink, mouse only; --text
Chosen label: white; --on-brand
Focus ring: 2 px, in the space around the segment; --focus-ring
Disabled: every segment at 60 percent

Width and small screens

On screens narrower than 640 px the control fills the width of its container and the segments share it. On wider screens each segment is as wide as its word.

The control does not scroll and does not wrap. At 360 px, check that the longest label fits its segment. If it does not, use a select.

Behavior and keyboard

The chosen fill slides to its new segment in 150 milliseconds. With reduced motion, it moves without sliding. If saving a setting fails, the choice goes back and a message says why.

A screen reader hears the control's name, the segment, its position and whether it is chosen.

Tab: reaches the chosen segment
Arrow keys: move to the next segment and choose it, wrapping at the ends
Home and End: choose the first and the last segment

Writing the labels

Label segments with nouns in sentence case, a word or two each: Today, Week, Month.

NextHeader

Segmented control

Chooses one of two to five short values that change a view or a setting at once.

Kind: component
Name: SegmentedControl
Page: https://design.werklist.com/components/segmented-control
Version: 2.1.2

When to use it

The period of a dashboard or a chart.
A setting with a few short values that applies at once, such as who picks up new applications: Off, Suggest, Auto.

When not to use it

Moving to another page or section: use Tabs or links.
Running an action: use Button.
More than five values or long labels: use Radio or Select.
Several values at once: use toggle buttons in a Toolbar.

Rules

Two to five short values of one setting or view.
The chosen segment is solid brand blue with white words, never a gradient.
A segmented control never opens another page. Tabs or links do that.

Anatomy

Track: 36 px high with a fine pointer, 48 px with a coarse pointer. Padding 2 px, 2 px between segments, radius 10 px. (--surface-control)
Segment: 32 px high, 44 px with a coarse pointer, radius 8 px. As wide as its word with 12 px at each side, at least 44 px. Below 640 px the segments share the width of the container. (--radius-lg)
Label: 13 px on 20 px, weight 700 on every segment (--text-muted)
Chosen fill (--brand-true)
Chosen label (--on-brand)
Focus ring: 2 px, offset 0, in the 2 px padding of the track (--focus-ring)

Sizes

fine pointer: height 36 px track, 32 px segments
coarse pointer: height 48 px track, 44 px segments

States

rest: muted label on the track (--text-muted, --surface-control)
hover: label in full ink, with a fine pointer only (--text)
chosen: brand fill under a white label. The fill slides from the old segment in 150 ms. (--brand-true, --on-brand)
focus visible: ring around the focused segment (--focus-ring)
disabled: the whole control only, every segment at 60 percent. The chosen one keeps its brand fill.

Keyboard

Tab: Moves to the chosen segment
Arrow keys: Move to the next or previous segment and choose it, wrapping at the ends
Home: Chooses the first segment
End: Chooses the last segment

Accessibility

A radiogroup named by its label. Each segment is a radio with aria-checked.
Only the chosen segment is in the Tab order.
In forced colors mode the chosen segment keeps an outline in the highlight color.

Content

Nouns or short noun phrases, sentence case.
Two to five segments.

Tokens

--surface-control
--text-muted
--text
--brand-true
--on-brand
--radius-lg
--space-3
--focus-ring
--duration-fast
--ease-standard

JSON

{
  "title": "Segmented control",
  "path": "/components/segmented-control",
  "url": "https://design.werklist.com/components/segmented-control",
  "text": "https://design.werklist.com/agent/components/segmented-control",
  "summary": "Switches a view or a setting between two to five short values in one compact row.",
  "version": "2.1.2",
  "kind": "component",
  "name": "SegmentedControl",
  "purpose": "Chooses one of two to five short values that change a view or a setting at once.",
  "use": [
    "The period of a dashboard or a chart.",
    "A setting with a few short values that applies at once, such as who picks up new applications: Off, Suggest, Auto."
  ],
  "avoid": [
    "Moving to another page or section: use Tabs or links.",
    "Running an action: use Button.",
    "More than five values or long labels: use Radio or Select.",
    "Several values at once: use toggle buttons in a Toolbar."
  ],
  "anatomy": [
    {
      "part": "Track",
      "measure": "36 px high with a fine pointer, 48 px with a coarse pointer. Padding 2 px, 2 px between segments, radius 10 px.",
      "token": "--surface-control"
    },
    {
      "part": "Segment",
      "measure": "32 px high, 44 px with a coarse pointer, radius 8 px. As wide as its word with 12 px at each side, at least 44 px. Below 640 px the segments share the width of the container.",
      "token": "--radius-lg"
    },
    {
      "part": "Label",
      "measure": "13 px on 20 px, weight 700 on every segment",
      "token": "--text-muted"
    },
    {
      "part": "Chosen fill",
      "token": "--brand-true"
    },
    {
      "part": "Chosen label",
      "token": "--on-brand"
    },
    {
      "part": "Focus ring",
      "measure": "2 px, offset 0, in the 2 px padding of the track",
      "token": "--focus-ring"
    }
  ],
  "sizes": [
    {
      "name": "fine pointer",
      "height": "36 px track, 32 px segments"
    },
    {
      "name": "coarse pointer",
      "height": "48 px track, 44 px segments"
    }
  ],
  "states": [
    {
      "name": "rest",
      "change": "muted label on the track",
      "tokens": [
        "--text-muted",
        "--surface-control"
      ]
    },
    {
      "name": "hover",
      "change": "label in full ink, with a fine pointer only",
      "tokens": [
        "--text"
      ]
    },
    {
      "name": "chosen",
      "change": "brand fill under a white label. The fill slides from the old segment in 150 ms.",
      "tokens": [
        "--brand-true",
        "--on-brand"
      ]
    },
    {
      "name": "focus visible",
      "change": "ring around the focused segment",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "disabled",
      "change": "the whole control only, every segment at 60 percent. The chosen one keeps its brand fill."
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the chosen segment"
    },
    {
      "key": "Arrow keys",
      "action": "Move to the next or previous segment and choose it, wrapping at the ends"
    },
    {
      "key": "Home",
      "action": "Chooses the first segment"
    },
    {
      "key": "End",
      "action": "Chooses the last segment"
    }
  ],
  "accessibility": [
    "A radiogroup named by its label. Each segment is a radio with aria-checked.",
    "Only the chosen segment is in the Tab order.",
    "In forced colors mode the chosen segment keeps an outline in the highlight color."
  ],
  "content": [
    "Nouns or short noun phrases, sentence case.",
    "Two to five segments."
  ],
  "tokens": [
    "--surface-control",
    "--text-muted",
    "--text",
    "--brand-true",
    "--on-brand",
    "--radius-lg",
    "--space-3",
    "--focus-ring",
    "--duration-fast",
    "--ease-standard"
  ],
  "rules": [
    "Two to five short values of one setting or view.",
    "The chosen segment is solid brand blue with white words, never a gradient.",
    "A segmented control never opens another page. Tabs or links do that."
  ]
}

Raw file: https://design.werklist.com/agent/components/segmented-control