ui patterns
Segmented control
What is a segmented control, and when should I use one instead of a dropdown?
A segmented control is a row of two to about five mutually-exclusive options, all visible at once, where exactly one is selected. It's the inline alternative to a dropdown: for a small, stable set of choices it shows every option up front and switches in a single tap, rather than hiding them behind a menu.
Also known as: segmented control, segmented button, toggle group, segmented control vs dropdown
Prefer to watch?
Watch the recap 0:45
The demo
A simple choice - how to view the results. See it as a segmented control, then as a dropdown, and watch the taps and the visible options change.
What this demo shows (text version)
One choice - view the results as a List, Grid or Map - is shown two ways. As a segmented control, all three options sit in a visible row and selecting one takes a single tap; you can compare them at a glance and always see which is active.
As a dropdown, the same three options are hidden behind a closed menu: you can't see them until you open it, switching takes two taps, and there's no way to compare without opening. For a small, fixed set of choices the segmented control wins on visibility and speed; a dropdown only starts to pay off once the options grow too many or too long to sit in a row.
When a choice has only a handful of fixed options, a segmented control beats a dropdown: every option is visible, comparison is instant, and switching takes one tap instead of two. Switch to a dropdown when the options are many, long, or variable - past about five, the row stops fitting and the menu earns its place.
As a segmented control every option sat in plain view and a choice was one tap. As a dropdown the same options vanished behind a menu - hidden until you opened it, two taps to switch, and impossible to compare at a glance. For three or four fixed choices, hiding them never helped anyone.
The deciding factor is the number and stability of options. Up to about five short, fixed choices, a segmented control wins on visibility and speed - it shows the whole set, supports recognition over recall, and switches in one tap. Beyond that the row overflows, and a dropdown's tidy menu becomes the better trade.
A dropdown looks neat because it hides things - which is exactly its cost. For a small choice set that cost buys nothing: people can't see their options, can't compare them, and pay an extra tap to do something a single tap could have done. Tidiness isn't the goal; an easy, visible choice is.
Keep segments genuinely mutually exclusive and roughly equal in weight - it's a single-choice control, not a toolbar. If options can be combined, or one is a clear primary action, you want checkboxes or buttons instead; the segmented control's whole promise is "pick exactly one of these few".