Segmented Control
A small row of mutually exclusive options that switches how a view is shown, not what it contains.
UI ComponentsA segmented control changes the presentation of what is already on screen: list or grid, day or week or month, chart or table. The data stays the same; the lens changes. That is the boundary with tabs, which swap the content itself. Using a segmented control to navigate between different records makes the switch feel like a filter that lost the user's place.
It only works small — two to five segments with short labels. Longer labels force truncation or an unbalanced row, and on narrow screens the whole control either overflows or shrinks past tappability. At that point a dropdown is the honest replacement.
In practice
An analytics product used a five-segment control for date ranges: Day / Week / Month / Quarter / Year. On a 375px screen each segment was 62px wide with 9px text. Collapsing to a dropdown below 480px, while keeping the segments on desktop, raised mobile date-range changes per session from 0.4 to 1.6.
Where teams get it wrong
- More than five segments, or labels long enough to truncate.
- Using it to switch between different content rather than different views of the same content.
- The selected segment marked only by colour.
- Keeping the desktop control on narrow screens where segments fall below a usable tap target.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a segmented control and tabs?
A segmented control changes how the same content is displayed; tabs change which content is displayed. If the underlying records stay the same and only the view changes, it is a segmented control.
How many segments can a segmented control have?
Two to five with short labels. Beyond that, the row either truncates or shrinks below a comfortable tap target, and a dropdown serves people better.
Related terms
All terms- Tabs (UI)A row of labels that switch between alternative views of the same object, showing one panel at a time.
- Dropdown (UI)A control that reveals a list on demand — either for selecting a value or for offering a menu of actions.
- Radio ButtonA control for choosing exactly one option from a visible, mutually exclusive set.
- Filter (UI)Controls that narrow a set of records — and the much harder job of keeping what was narrowed visible.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us