Segmented control or tabs?

Tabs switch panels or routes and often sit above content. A segmented control filters or toggles a mode on the same view, like Day, Week, Month on a chart. iOS Settings uses segments for on-device choices; Safari uses tabs for separate pages.

Segmented control or radio group?

Same semantics, different paint. Use segments when the options are short and sit inline with a toolbar. Use radio buttons when each option needs a description underneath.

Two to five in practice. Six cramped labels force wrapping and break the equal-width look.

Must one option be selected?

Usually yes. Default to the most common view, like Week on a calendar. Allowing none selected only makes sense when off is a valid filter state.

Icons alone work when the metaphor is universal, like list versus grid. Add a visible text label or aria-label when it is not.

How do I show the selected segment?

Fill, weight or colour on the active segment, plus aria-pressed or checked in the markup. Colour alone fails WCAG 1.4.1, so pair colour with a fill or border.

Segmented control

A segmented control shows two to five options on one line and lets someone pick exactly one. Every option has the same weight and width.

Forms and inputBuild difficulty: Easy<div role="radiogroup">

Also called Segmented button, Button group, Toggle group.

Period

Showing data by week

Pick one option. Arrow keys move between segments once focus is inside the group.

For designers

A segmented control is a row of equal buttons where only one can be on. Apple uses it for view switches in Calendar and Maps. Linear uses a similar pattern for issue layout toggles. The whole control reads as one unit, not a scattered row of separate buttons.

The cost is space and label length. Long text wraps and breaks the visual rhythm. If options need explanation, a radio group with descriptions wins. If switching changes the URL or shows a different panel below, tabs are the better metaphor.

Put the control close to what it changes. A Day / Week / Month segment above the chart it filters makes cause and effect obvious. The same control in a distant toolbar feels disconnected from the data it affects.

Use a segmented control when

There are two to five mutually exclusive options and all labels are short
The choice changes a view or filter on the same screen without navigation
Every option should look equally important

Reach for something else when

The options are links to different pages or sections. Use tabs instead.
Each option needs a longer description or a secondary line. Use a radio group instead.
There are more than about five options or labels wrap to two lines. Use a select instead.
Someone needs to pick more than one option at once. Use checkboxes instead.

Variants

Chart range

Align

Three options for a chart period, and an icon-free alignment control with two choices.

Text only. Day, Week, Month on a chart. The default when every label is one word.

Icon with text. A small icon beside each label when the metaphor helps, like list and grid.

Two options. On and off views, or list versus board. At two segments the control can be narrower.

How to build a segmented control

Build on a radiogroup or a toggle group with single selection. Segments share one border and divide the row evenly.

<fieldset>
  <legend>Period</legend>
  <div role="radiogroup" aria-labelledby="period-label">
    <button type="button" role="radio" aria-checked="false">Day</button>
    <button type="button" role="radio" aria-checked="true">Week</button>
    <button type="button" role="radio" aria-checked="false">Month</button>
  </div>
</fieldset>

Arrow keys move between segments when focus is inside the group, matching radio behaviour in the WAI-ARIA Authoring Practices. Space or Enter selects the focused segment. Only one segment carries the selected style. Connect the group to the content it filters with aria-controls when the change updates a region on the page.

Outline variant with no gap between items is the usual look: shared outer border, dividers between segments, filled background on the active one. Spacing between separate buttons reads as unrelated actions.

Edge cases

Disabled segment. Grey out options that do not apply and skip them in arrow-key navigation, or leave them focusable with an explanation.

Responsive width. On narrow screens, shrink padding before you shrink type. If labels still wrap, move to a select.

Reduced motion. Selection can snap between fills. Skip slide animations under prefers-reduced-motion.

Loading after change. If switching segment fetches new data, show a skeleton in the content region, not a spinner on the segment itself. The control should stay tappable.

Equal width. Give each segment the same flex basis so Day and Month occupy the same width. Uneven widths make the control look like two buttons and a wide one between them.

Common questions

Segmented control or tabs?: Tabs switch panels or routes and often sit above content. A segmented control filters or toggles a mode on the same view, like Day, Week, Month on a chart. iOS Settings uses segments for on-device choices; Safari uses tabs for separate pages.
Segmented control or radio group?: Same semantics, different paint. Use segments when the options are short and sit inline with a toolbar. Use radio buttons when each option needs a description underneath.
How many segments?: Two to five in practice. Six cramped labels force wrapping and break the equal-width look.
Must one option be selected?: Usually yes. Default to the most common view, like Week on a calendar. Allowing none selected only makes sense when off is a valid filter state.
What about icons?: Icons alone work when the metaphor is universal, like list versus grid. Add a visible text label or aria-label when it is not.
How do I show the selected segment?: Fill, weight or colour on the active segment, plus aria-pressed or checked in the markup. Colour alone fails WCAG 1.4.1, so pair colour with a fill or border.

Last reviewed 27 AUG 2026