UI components · Form input
Segmented Control
Also called: Segmented button, Toggle group, Button group, Segmented picker
A few option buttons packed into one strip, where only one can be selected at a time. Used to switch quickly between a few views or modes.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstPut a segmented control in the top-right corner of the chart with the options "Day / Week / Month." Make the whole thing a light gray rounded pill, with the selected option shown as a white slider with a soft shadow that slides smoothly when switching. Select "Week" by default, and update the chart data when switching, without reloading the page.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Segmented Control is what you need.
Use Segmented Control when
- Switching between two or three ways of showing the same data, like list and grid views
- Switching conditions like time range or units, where there are few options and people switch often
- There's limited space in a toolbar or the top-right corner of a card, and you need a compact single choice
Pick something else when
You're switching between completely different content areas; tabs fit better
There are more than five options or the labels are long, so they don't fit in one strip
A setting with only on and off; a switch is clearer
Use insteadSwitch
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Using it as the page's main navigation, so switching changes the whole page
- 02
Labels of very different lengths, so some wrap and others get cut off
- 03
The selected and unselected states look almost the same, so you can't tell which one is picked
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A rounded track with 2 to 5 equal-width options inside it. The selected option stands out with a slider or a dark background.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A segmented control looks like a pill-shaped strip split into a few segments. The selected one has a white slider or a dark background, and the rest are light. It's often used to switch views ("List / Grid"), time ranges ("Day / Week / Month"), or modes ("Light / Dark"). There are usually only 2 to 5 options, each a very short word or an icon.
It's a lot like Tabs. The difference: tabs switch between whole different blocks of content below them, usually sit above the content, and look like underlined text. A segmented control is more like an input. It switches how the same data is shown or filtered, it's small, and it fits in a toolbar. Compared with a Radio, it's more compact and better for switching often. With more than five options or long labels, use a select or radio buttons instead.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-segmented- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-segmented.el-segmented[class*="MuiToggleButtonGroup-root"][data-slot="toggle-group"]
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026