# 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