Segmented
You might say
Put two or three choices side by side so people can tap one to switch, like the iPhone control.
Switch quickly between a few short, exclusive modesA segmented control keeps several short options visible together. It often changes a view, sort order, or time range and usually does not navigate to a new page. If options are numerous or their labels are long, choose another control.
Segmented Control
When to use it
- List or grid view
- Short time ranges
- Sort mode
- A few mutually exclusive display modes
When NOT to use it
- Use it for many long choicesOverviewSettingsLogs
- Treat it as primary page navigation
- Use icons whose meaning is not obvious
- Use it as an on-off setting; choose a Switch
Anatomy
ListKanbanCalendar
The overall container, with a rounded gray background
The white highlight that indicates the current value
The remaining options; users can select them with a click.
Variants
Default
ListKanbanCalendar
When a small number of side-by-side views need to be quickly switched at the original position
Icon
☰ List▦ Board📅 Calendar
When labels are too abstract on their own, add icons to help users recognize them
Small
DayWeekMonth
For use in toolbars where space is tight
Typical use cases
View switcher
Iterative tasksEventsKanbanCalendar
To-do · 2
Login page UI walkthrough
Integration testing
In progress · 1
Kanban drag and drop sorting
Complete · 5
Requirements Review
Time-range filter
Visit trendPolylineColumnPie chart
OneTwoThreeFourFiveSixthDay
Sort control
Data CenterDayWeekMonth
Active users this week
2,318
This week’s order
486
This week’s revenue
¥36,000
Editor mode
Further reading