Radio Group 单选组
在一组互斥选项中选择且始终只保留一个当前值。
使用概览
适合使用
- 选项数量较少并且用户需要直接比较全部候选时。
不建议使用
- 允许同时选择多项，或候选项很多更适合下拉选择时。
真实示例
订阅套餐单选组
在两个互斥套餐中选择一个当前值。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/radio-group.json基础用法
导入
import { RadioGroup, RadioGroupItem } from "@richardqiu/quartz/radio-group";JSX
<RadioGroup aria-label="订阅套餐" defaultValue="pro"><label><RadioGroupItem value="starter" />入门版</label><label><RadioGroupItem value="pro" />专业版</label></RadioGroup>状态与控制摘要
默认
悬停
键盘焦点可见
已禁用
无效
未勾选
已勾选
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" | 设置选项布局与方向键导航方向。 |
组合结构
- 01
RadioGroup - 02
RadioGroupItem
键盘约定
- Tab 进入漫游焦点组，方向键移动焦点，空格键选择当前项。
可访问性契约
- 为选项组命名，并为每一项提供可见标签或可访问名称。
- 保留原生 name、value、required 与 disabled 表单语义。