use UI

Segmented Control vs Tabs

They can look identical and still be different components. Tabs reveal separate panels — the content behind each label is genuinely different, so the browser is told there are panels and each label controls one. A segmented control changes how the same content is drawn: list or grid, day or month. Nothing is revealed, so there are no panels to announce, and it is a radio group instead. Reaching for a tablist because it looked right is how screen reader users end up being promised panels that never arrive.

Different content behind each label means tabs. The same content shown differently means a segmented control.

Segmented Control

A compact set of adjacent options, exactly one of which is selected, used to switch between views or modes of the same content.

Reach for it when

  • The same data is being shown a different way — list or grid, day or month, chart or table.
  • It filters rather than navigates: All, Active, Archived over one list.
  • The choice is a setting that belongs to the view, and you want it visible rather than buried in a menu.
  • There are two to four short options that fit on one line without wrapping.

Avoid it when

  • The options lead to genuinely different content. That is tabs, and using a segmented control mislabels the relationship for assistive tech.
  • There are five or more options, or the labels are long. Past that point a select is more honest than a squeezed row.
  • More than one can be active. Segmented controls are single-choice by definition; use checkboxes or a multi-toggle group.
  • The options are actions rather than states. A row of buttons that do things is a toolbar, not a segmented control.

Tabs

A set of labelled panels occupying the same area, where selecting a label reveals its panel and hides the others.

Reach for it when

  • The content splits into related but genuinely separate sections — Overview, Activity, Settings.
  • The user needs one section at a time and switching is occasional rather than constant.
  • There are two to six sections with short, predictable labels.
  • Each section is substantial enough to deserve its own space; tabs over three lines of text each is overhead.

Avoid it when

  • The user needs to compare what is in two panels. Anything hidden cannot be compared, and they will switch back and forth trying.
  • The sections are steps in a sequence. That is a stepper — tabs imply you may visit them in any order.
  • There are more than about six, or the labels are long. Scrolling or wrapping tabs stop reading as one row and start reading as noise.
  • The content is short enough to stack. Two paragraphs behind two tabs is worse than four paragraphs on a page.
  • The panels are the same content shown differently. That is a segmented control.