Skip to content

Segmented control

A segmented control lets users switch between a small set of mutually-exclusive views of the same content — List vs Map, a filter across one dataset, an in-place state toggle — without navigating away.

Quarantine

DesignDevelopAccessibility

A segmented control lets a user pick one option from a small set that swap between mutually-exclusive views of the same content — List vs Map, an in-place filter, a state toggle. Selection happens in place: the user stays on the page and never loses their scroll position. Reach for it when there are two to three equal, always-visible options and the choice re-renders content rather than navigating away.

This component is fully responsive and intentionally designed across mobile, tablet, and desktop — no alternative versions required.

Anatomy

Section titled “Anatomy”
Map view
  1. Segmented control
  2. Selector
  3. Label

When to use it

Section titled “When to use it”

Use a segmented control when:

  • Exactly one option can be active at a time.
  • The options are different views or filters of the same content.
  • Switching should happen in place, without a page load or navigation.
  • There are two to three options — occasionally up to five.

Avoid a segmented control when:

  • More than one option can be selected — use Checkbox or Chips.
  • The choice is a binary on/off — use Toggle.
  • The options are independent sections or pages — use Tabs.
  • There are more than five options, or the labels are long — use a Dropdown / Select.

Choosing the right control

Section titled “Choosing the right control”

Segmented control sits between Tabs and Toggle. Walk the decision guide from the top:

More than one can be selected?

The choices aren’t mutually exclusive — a user can pick several at once. Use Chips (compact, inline filtering) or Checkbox (forms, settings). Not a segmented control.

Binary on / off?

A single setting that’s either on or off, taking effect immediately. Use a Toggle. Not a segmented control.

Independent sections?

Each option reveals a distinct section or destination the user navigates between. Use Tabs. Not a segmented control.

Variations of the same content?

One dataset or view, switched between a few equal alternatives, in place. This is the segmented control.

Properties

Section titled “Properties”

Segmented control

The enclosing container that holds the segments and reads as a single control. Groups the options with a shared, always-visible background so the set is legible as one unit, and rounds to a pill.

Selector

One option in the set. Segments are equal width — two to five distribute evenly and never need per-option width tuning. Each carries its own state — Rested, Hover, Selected, Disabled, Focus — each driven by its own design-token set.

Selected fill

A contained fill pill marks the one active segment; there’s no sliding indicator. Exactly one segment is selected at all times — the browser enforces this because the segments are same-name radios.

Size

Three text sizes — Small, Medium (default), Large — set the segment typography and padding to match the density of the surrounding context.

Icon

A segment can carry a leading icon before its label, or be icon-only — a compact square variant where labels are unnecessary. Icon-only segments still need an accessible name for screen readers.

Scheme

Neutral (default) reads on light surfaces; Contrast reads on dark or coloured surfaces. Brand (Toyota / Lexus) is inherited automatically — the control is never themed per brand.

Platform considerations

Section titled “Platform considerations”

Desktop

Default Medium size. Keep the control near the content it switches so the cause-and-effect is obvious. Prefer two to three segments; the whole control should read at a glance without scanning.

Tablet

Same rules as desktop. Touch input is common — the whole segment is the tap target, so keep labels short enough that each segment stays comfortably tappable.

Mobile

Keep to two or three segments; long labels or five options crowd a narrow width — switch to a Dropdown instead. The Small size suits dense mobile toolbars.

Best practices

Section titled “Best practices”

A segmented control should read as one compact switch. Keep the option set small, the labels parallel, and the active choice unmistakable.

Do

Keep two to three segments (five is the hard ceiling). Use short, parallel labels in sentence case. Make sure exactly one segment starts selected. Switch content in place — the user shouldn’t lose context. Keep the control next to what it controls.

Don't

Don’t use it for more than five options, or for long labels — reach for a Dropdown. Don’t mix it up with Tabs (independent sections) or Toggle (binary). Don’t allow zero or multiple selections. Don’t hide the selected state or rely on colour alone to signal it.

Content guidelines

Section titled “Content guidelines”

Label each segment with one or two words, in sentence case, with no trailing punctuation (“Map”, “List”, “This week”). Keep the labels parallel — same part of speech, same grammatical shape — so the set reads as one choice. Never let a label wrap past two lines; if it needs more, the control is the wrong choice. For icon-only segments, still give every option a clear accessible name.