分段控制器
Segmented Control
别名:分段选择几个按钮连在一起周月年切换segmented buttons
这是什么
将少量互斥选项并排放在同一个容器中的选择控件。选中状态通过底色、文字和边界同时表达，切换后立即更新当前视图或设置。它适合时间范围、显示方式等轻量选择；选项应简短、稳定且始终可见。与标签页不同，它通常修改同一内容的呈现方式，而不是进入另一组内容。
名词辨析
Segmented Control（分段控制器）是紧凑的互斥选择条，常用于模式/筛选；Tabs 切换内容面板；Radio 是表单内互斥选择。
交互实验室
试一试，再决定怎么用用鼠标或方向键切换周、月、年，观察统计数值和图表同步变化。
正在加载实验室…
使用时关注什么
- 01选中项和展示结果应始终一致。
- 02一组只能选中一项，方向键可以连续切换。
✓ 适用场景
- 在统计图中选择周、月、年。
- 在同一内容中切换显示密度或排序方式。
✕ 不适用场景
- 选项过多或名称较长时使用选择框。
- 允许同时选中多个值时使用复选框。
常见形式
填充分段
Filled
共享底板，选中项抬高，适合工具界面。
描边分段
Outlined
外边框包裹，选中项用强调色表达。
实现要点
display: flex:checked:focus-visible互斥值优先使用原生同名 radio，保留方向键操作。整段共用一个可访问名称；不要只靠颜色表示选中状态。每个选项至少提供 40px 的点击高度，结果随选择同步更新。
相关概念
单选框Radio
用一组圆形按钮表示互斥选项，同组内只能选中一个且不可取消。 与复选框的核心区别是多选与单选；选中圆点用填充动画反馈， 选项少（2～5 个）时平铺展示比下拉选择效率更高。
组件相似概念标签页Tabs
用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件相似概念开关Switch
用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件相似概念