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.

Know first

Radio Tabs

Segmented Control

EventsKanbanCalendar

You can say this to an AI Agent

Add a List/Grid segmented control to the file toolbar. Change only how the same files are displayed, keep the current mode highlighted, and test keyboard use and the default after refresh.

Segmented≠Button

Segmented contains mutually exclusive choices: selecting one clears another. A Button or button group runs actions and does not imply exclusive options.

When to use it

List or grid view
ListKanbanCalendar
Short time ranges
PreviewSource
The content stays the same; only the view changes
Sort mode
DayWeekMonth
A small set of short labels is easy to scan
A few mutually exclusive display modes
TodayThis weekThis month

When NOT to use it

Use it for many long choices
OverviewSettingsLogs
Treat it as primary page navigation
AllFrontendBackendDesignOperationsTestingToo many options squeeze each label and make scanning harder
Use icons whose meaning is not obvious
PriorityLowMediumHigh
Submit
If it only takes effect on submit, radio buttons are clearer
Use it as an on-off setting; choose a Switch
OnOff
For two states, a switch is easier to use

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

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

README.mdPreviewSource code

# vibe-ui-guide
Front-end entry component illustration
- Each component comes with a screenshot of the real interface
- Explain when to use and when not to use

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A file toolbar needs an immediate choice between List view and Grid view. What control fits best?

A. Use a two-part segmented control that keeps the current view highlightedB. Use tabs and treat the views as two content pagesC. Use one switch where on and off stand for the two views