Skip to content

Tab Picker

Selection – Input

A tab picker lets users choose one value from a small set of mutually exclusive options, laid out as a tab-like strip. It looks like Tabs, but it navigates nothing — it is a single-select control, and only one option is selected at a time.

  • CSS
  • React

Maintained by Platform and Trinity

Ready to use

DesignCSSReactAccessibility

The Tab Picker lets users select a single option from a predefined set of mutually exclusive choices, displayed in a tab-like layout. Although it is visually identical to Tabs, it does not control navigation and does not switch between content sections — it is a single-selection control that lets users choose one value from a small set. Reach for it where people need to compare and pick between related values quickly (a battery size, a fuel type) while keeping a compact, familiar visual pattern. Only one option can be selected at a time.

Anatomy

Section titled “Anatomy”

The picker is a group of options over the shared tab strip. Exactly one option carries the selected treatment; the group’s label is usually implied by the surrounding content rather than shown.

Battery
  1. Tab picker
  2. Option
  3. Selected option

When to use it

Section titled “When to use it”

The question that separates a tab picker from Tabs is what the click does: a tab picker chooses a value, Tabs switches a content panel. The two look the same, so pick by meaning rather than by appearance.

Use a tab picker when:

  • Users select one option from a small set of mutually exclusive choices.
  • The options are comparable values that read well in a compact horizontal row.
  • The currently selected option should be clearly indicated.
  • Users switch quickly between predefined values.
  • Frequently used selections should stay visible without opening a dropdown.

Avoid a tab picker when:

  • More than one option can be selected at once.
  • Selecting an option should reveal or hide a content panel — use Tabs.
  • There are many options, or users can enter a custom value — use a dropdown or a field.
  • The options are unrelated or don’t belong to the same decision group.

Keep it to a small set — the design caps it at five options — and make sure exactly one option is selected at all times.

Properties

Section titled “Properties”

Scheme

Neutral or Contrast. The container picks up the scheme tokens so the option colours flip when the surrounding surface is dark — no per-option overrides needed.

EV accent

A special border colour for the selected option when the picker sits inside an EV-tools surface — the Charging Time Calculator’s battery and fuel-type pickers are the reference case. Use only for EV Tools, not as a general accent.

State

Rested, Hover, Active, Focus, and Disabled. The active state is reinforced with a bolder weight, a coloured border and a contrast fill, so the cue isn’t carried by colour alone, and focus stays distinguishable from hover.

Options

Up to five mutually exclusive values, with exactly one selected at any time. Labels of similar length keep the row balanced; the picker has no overflow behaviour, because a set that needs scrolling is too large for this control.

The selected option carries the same contrast fill as a selected tab, painted from the selection itself — there is nothing to set per option.

Platform considerations

Section titled “Platform considerations”

Desktop

The options sit in a single row next to the value they qualify. Keep labels short enough to fit on one line so the whole set can be compared at a glance.

Tablet

Same row layout. With five options as the ceiling the row should always fit — if it doesn’t, the wording is too long or the set is too large for a picker.

Mobile

Still a single row: unlike Tabs, the picker doesn’t scroll horizontally. Shorten the labels or move to a dropdown rather than letting the set overflow.

Best practices

Section titled “Best practices”

The picker’s whole job is to make one choice out of a few obvious, and to keep that choice visible afterwards.

Do

Keep labels short, clear, and easy to scan; limit the set to a maximum of five options; ensure only one option can be selected at any time; use it for related values belonging to the same decision group; give rested, hover, active, focus, and disabled a clear visual distinction; keep option lengths consistent wherever possible; keep the selected option visible and identifiable at all times; and place the picker close to the information it relates to.

Don't

Don’t use it for navigation between pages or content sections, don’t allow multiple options to be selected simultaneously, don’t use it for large option sets that become hard to scan, don’t truncate meaningful labels, don’t rely exclusively on colour to indicate the selected state, don’t mix unrelated options within the same picker, and don’t use it as a replacement for Tabs when content panels are required.

Content guidelines

Section titled “Content guidelines”

Option labels name the value they select, not an action — “50 kWh”, “Petrol”, “Monthly”. Keep the wording parallel across the row (all units, all nouns) and of similar length so the options read as one comparable set, use sentence case, and avoid trailing punctuation. Where the values share a unit, repeat it on each option rather than hiding it in surrounding copy, so each label stands on its own when read out in isolation.