COMPONENT 34 · Selection & Values

分段控制器

Segmented Control

也叫Segmented ButtonToggle Group分段选择器NSSegmentedControl

在紧凑的相邻分段中切换少量互斥视图或模式。

Switches among a few mutually exclusive views or modes in adjacent segments.

ANATOMY & USAGE

结构与使用建议

组成部分

控件容器
分段按钮
选中状态

适合使用

有二到五个短标签的同级模式需要快速切换时。

不建议使用

选项多、标签长或内容属于页面级导航时。

键盘与无障碍

采用 radio group 或 tabs 的完整语义；选中状态不能只由背景色表达。

DESCRIBE IT TO AI

这样告诉编程助手

实现分段控制器（Segmented Control）：在紧凑的相邻分段中切换少量互斥视图或模式。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<fieldset class="demo row">
  <legend>分段控制器</legend>
  <label>
    <input type="radio" name="choice"> 开启通知</label>
  <label>
    <input type="radio" name="choice"> 每周摘要</label>
</fieldset>