组件
Segmented 分段选择
少量互斥值在原处切换,状态始终可见。
适合两到五个短选项,例如显示密度或排序方向。SegmentedControl 表达一个受控值,使用原生 radio;跳转到另一页面应使用 NavigationTabs。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/segmented.json首次使用请先完成 Registry 与主题接入。
状态与组合
当前项、键盘焦点和禁用分别可见。较长选项或较多选项会削弱分段控件的比较优势,此时改用 Choice Picker。与表单组合时为每组提供独立 name。
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | 必填 | radio 组的可访问名称 |
name | string | 必填 | 原生 radio 分组名 |
value | 泛型字符串 T | 必填 | 当前值 |
options | readonly { value: T; label: string }[] | 必填 | 有序候选项 |
onChange | (value: T) => void | 必填 | 选择更新 |
disabled | boolean | false | 禁用整组 |
键盘与约束
Tab 进入原生 radio 组,方向键在同组中切换,Space 选择。选中状态不能只依赖文字颜色;每个 value 必须唯一。
避免这样使用
不要为页面导航添加 radio 语义;不要把互不相关的动作放在同组;不要省略 name 或让两个无关组意外共享同名。
来源与版本
0.1.0,来自 Subtic apps/web/components/ui/segmented.tsx。保留原生选择语义并增加整组禁用。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
SegmentedControl
| 属性 | 类型 | 默认值 |
|---|---|---|
label | string | — |
name | string | — |
value | T | — |
options | readonly { value: T; label: string }[] | — |
onChange | (value: T) => void | — |
disabled? | boolean | false |
unstyled? | boolean | false |
classNames? | Partial<Record<"root" | "label" | "input" | "control", string>> | {} |