分段控制器输入
它把少量互斥选项并排连在一起，点其中一格就会立即切换当前选择或内容。
- 几个选项挤在一条里只能选一个
- 一排连在一起点哪个哪个亮的按钮
- 像药丸一样分成几格的选择按钮
- 分段控制器
- 分段选择器
- 分段按钮
- 胶囊切换
示例
示例可交互
Web / iOS / Android 对照
Web需自己实现
桌面与移动端主流浏览器
Segmented Control
也叫 Segmented Button
Web 没有原生的分段控制器元素。互斥选择应优先使用原生单选按钮并调整样式；只有在切换同一页面内的内容面板时才使用标签页模式。
通常怎么做：用一组 radio 表达互斥选择并绘制成连续按钮；切换面板时遵循 ARIA Tabs。
iOS原生支持
iOS / iPadOS
Segmented Control
SwiftUI: Picker + .pickerStyle(.segmented)｜UIKit: UISegmentedControl
适合少量、互斥且地位相同的选项，用户选中后通常立即生效。标签应保持简短，避免挤压。
Android原生支持
Android 手机 / 平板；Material 3 Compose
Segmented Button
Compose Material 3: SingleChoiceSegmentedButtonRow / MultiChoiceSegmentedButtonRow
Material 3 提供单选和多选两种分段按钮组。与本词条常见的互斥切换场景对应时，应使用单选版本。
使用规范
什么时候用
- 在两到五个简短、互斥且同等重要的选项之间切换
- 选择后可以立即更新当前内容，不需要额外提交按钮
- 所有选项需要同时可见，方便用户直接比较
- 当前选中项需要持续清楚可见，让用户随时知道正在查看哪种状态
什么时候别用
- 选项很多或标签很长 → 用 Select、菜单或单独的选择页
- 需要同时选择多个项目 → 除非平台明确使用多选分段按钮，否则用复选框
- 用于应用一级页面导航 → 用 Tab Bar 或 Navigation Bar
给 AI 的提示词
这条词条还没有经过验证的实现提示词。