表单
RadioGroup
一组互斥的选项。
示例
default
说明
一组互斥的选择。
漫游 tabindex 归 Radix 管，所以整组只占一个 Tab 停靠点，方向键在选项之间移动——这是 ARIA radiogroup 模式的要求，也是一堆手搓的 <input type="radio" 包装最常做错的地方。
属性
同时接受 ComponentProps<typeof RadioGroupPrimitive.Root> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
组成部分
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
RadioGroupItem
一个选项，连同它的标签，构成一个点击目标。
<label> 把两者都包住，所以整行都能点——一个光秃秃的 18px 圆圈低于所有指针目标规范，在手机上更是难受。它同时也是这个控件可访问名称的来源：去掉这层包装，这个单选框就完全没有名字了。
选中跟随焦点，这是让 radiogroup 在键盘下真正好用的那一半模式：移到哪个选项就选中哪个，没人需要多按一个键来确认。这里是自己实现的而不是继承来的，因为上游原语把它挂在一个由 keyup 清除的标志上，而它跑不赢自己的焦点移动——见 ARROW_GRACE_MS。重复选中一个已经选中的选项是空操作，所以即使上游那条路径确实触发了，这里也仍然正确。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 可见的标签。渲染在包住控件的那个 `<label>` 里面。 |
同时接受 Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
键盘操作
| 按键 | 作用 |
|---|---|
| Tab | 进入和离开这一组——整组只占一个 Tab 停靠点。 |
| ↑↓←→ | 在选项间移动，并且移到哪就选中哪。 |
无障碍
- 整组只有一个 Tab 停靠点，方向键在选项之间移动，符合 ARIA radiogroup 模式。
- 标签在 <label> 里面，所以整行都是点击目标。