Segmented Control
分段控制器
Aliases:分段选择几个按钮连在一起周月年切换segmented buttons
What is it
A compact group of mutually exclusive choices with an immediately visible selection. Use it to change a time range or display mode within the same view. Keep labels short and all choices visible. Unlike tabs, it usually changes how the current content is presented rather than moving between separate panels.
Name disambiguation
A segmented control is a compact mutually-exclusive switch for modes or filters. Tabs swap content panels. Radio is in-form single choice.
Interactive playground
Try it. Make an informed choice.Switch between week, month and year with pointer or arrow keys; watch both the metric and chart update.
Loading lab…
What to look for
- 01The selected option must agree with the displayed result.
- 02Exactly one option is selected; arrow keys move through the group.
✓ When to use
- Choose a week, month or year for a chart.
- Change density or ordering in one view.
✕ When not to use
- Use a select for many or lengthy options.
- Use checkboxes for multiple selections.
Variants
Filled
填充分段
A shared surface with a raised selection for utility interfaces.
Outlined
描边分段
An outer border with an accented selection.
Implementation
display: flex:checked:focus-visibleUse native radios with the same name to retain arrow-key navigation. Give the group an accessible name and make selection visible beyond color. Aim for a 40px target height and update the result immediately.
Related concepts
A set of circular buttons for mutually exclusive options — exactly one selected per group, never unset. The core contrast with checkboxes is single versus multi selection; the dot fills with animation on select, and with 2–5 options a visible radio group beats a dropdown.
ComponentsSimilarA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsSimilarA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsSimilar