kitseed.
组件

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

属性类型默认值说明
labelstring必填radio 组的可访问名称
namestring必填原生 radio 分组名
value泛型字符串 T必填当前值
optionsreadonly { value: T; label: string }[]必填有序候选项
onChange(value: T) => void必填选择更新
disabledbooleanfalse禁用整组

键盘与约束

Tab 进入原生 radio 组,方向键在同组中切换,Space 选择。选中状态不能只依赖文字颜色;每个 value 必须唯一。

避免这样使用

不要为页面导航添加 radio 语义;不要把互不相关的动作放在同组;不要省略 name 或让两个无关组意外共享同名。

来源与版本

0.1.0,来自 Subtic apps/web/components/ui/segmented.tsx。保留原生选择语义并增加整组禁用。

查看由当前源码生成的类型参考

只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。

SegmentedControl

属性类型默认值
labelstring—
namestring—
valueT—
optionsreadonly { value: T; label: string }[]—
onChange(value: T) => void—
disabled?booleanfalse
unstyled?booleanfalse
classNames?Partial<Record<"root" | "label" | "input" | "control", string>>{}

本页内容