Component

Segmented control

Two to five joined options, exactly one selected, that switch a view or a setting in place.

Plain-text source, for agents and clipboard use: /components/source/segmented-control.txt

When to use it

Chooses between a few short, mutually exclusive options that are all worth seeing at once: list, calendar or map; gross or net. It is a set of native radio buttons styled as one joined control, so arrow keys, form submission and the group label come from the platform. The selected option fills with surface-selected and its text turns teal.

Not this

Not for switching between panels of different content; use Tabs. Not for more than five options or long labels; use a Select. Not for an on or off setting; use a Switch, or a Checkbox in a form. Not for actions; use Buttons.

Examples

Default

The legend is hidden because the options say what they switch. Arrow keys move the selection.

List Calendar Map

html

<fieldset class="flux-segmented">
  <legend class="flux-visually-hidden">View</legend>
  <label class="flux-segmented__option"><input type="radio" name="view" value="list" checked />List</label>
  <label class="flux-segmented__option"><input type="radio" name="view" value="calendar" />Calendar</label>
  <label class="flux-segmented__option"><input type="radio" name="view" value="map" />Map</label>
</fieldset>

With a visible label

As a setting in a form, the group takes a field label.

Show prices

Gross Net

html

<div class="flux-field">
  <span class="flux-field__label" id="price-label">Show prices</span>
  <fieldset class="flux-segmented" aria-labelledby="price-label">
    <label class="flux-segmented__option"><input type="radio" name="price" value="gross" checked />Gross</label>
    <label class="flux-segmented__option"><input type="radio" name="price" value="net" />Net</label>
  </fieldset>
</div>

Small, with a disabled option

flux-segmented--sm matches small buttons in a toolbar. A disabled option stays visible so the set does not change shape.

Day Week Month Season

html

<fieldset class="flux-segmented flux-segmented--sm">
  <legend class="flux-visually-hidden">Period</legend>
  <label class="flux-segmented__option"><input type="radio" name="period" value="day" />Day</label>
  <label class="flux-segmented__option"><input type="radio" name="period" value="week" checked />Week</label>
  <label class="flux-segmented__option"><input type="radio" name="period" value="month" />Month</label>
  <label class="flux-segmented__option"><input type="radio" name="period" value="season" disabled />Season</label>
</fieldset>

Anatomy

Part	Description
Group	A fieldset with a legend, visually hidden when the purpose is clear from the context.
Option	A label wrapping a radio input that is invisible but still receives focus and clicks.

API

Name	Kind	Description
`flux-segmented`	class	On the fieldset.
`flux-segmented__option`	class	On each label. Put the radio first inside it, then the text.
`flux-segmented--sm`	class	The small height, for toolbars.
`input type="radio"`	element	One per option, sharing a name. checked and disabled work as usual.

States

State	Treatment
Default	text-secondary on the field background, inside a border-strong outline.
Hover	text-primary.
Selected	surface-selected fill and text-brand. The radio’s checked state, not colour alone, carries it to assistive technology.
Focus	The Flux focus ring around the focused option.
Disabled	text-disabled and not selectable.

Keyboard

Keys	Action
`Tab`	Moves focus to the selected option, then out of the group.
`← → ↑ ↓`	Selects the previous or next option.

Accessibility

Native radios provide the group role, the checked state and arrow-key selection.
Give the fieldset a legend, or aria-labelledby pointing at a visible label.
The change takes effect on selection; announce any resulting change in content with a live region.

Tokens

The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.

--flux-segmented-height | -height-sm | -padding-x
--flux-segmented-bg | -border | -text | -text-hover
--flux-segmented-selected-bg | -selected-text

Do and don’t

Keep labels to one or two words.
Apply the change immediately when the selection changes.

Don’t

Do not use it in place of Tabs to switch between different panels of content.
Do not put more than five options in one control.
Do not leave the group with nothing selected.