Radio

何时用

一组互斥选项里选且只选一个、且选项数少（约 2-6 个）需全部直接可见时用。选项多需收起或搜索改用 Select；多选共存改用 CheckboxGroup；横向二三段且要滑块视觉用 Segmented。

导入

Props

RadioGroup

Radio

Events

RadioGroup

Slots

RadioGroup

Radio

禁忌 / 坑

• 选中值统一由 RadioGroup 管，Radio 不自带选中态——别在 Radio 上找 checked。
• 用 value/onValueChange 即受控，须自管 state；只给初值用 defaultValue，二者不要混用。
• 无可见标题的单选组要给 aria-label，否则无障碍读屏无名。
• 不给 `label` 的 `Radio`（图标卡片、自定义排版）必须自带 `aria-label` 或 `aria-labelledby`，否则读屏只报「单选按钮」，用户不知道自己在选哪一项——这不只是测试不好写，是真实的可访问性缺陷。label 传的是图标之类的非文本 ReactNode 时同理。
• 自己写 <label> 把 Radio 包起来是成立的，不用手写 onClick 转发：Root 渲染出来是 <span role="radio">（不是可被 label 关联的元素），看 DOM 容易以为隐式关联不生效，但 Base UI 在里面留了一个视觉隐藏的原生 input 承载激活。排版特殊到 size + labelClassName 也收不住时就这么用。
• 但别在包裹的同时再给 <label htmlFor> 指向 Root 的 id：显式 htmlFor 会压过隐式关联，两者并存的结果是点文字彻底没反应。
• 放进 Field 时每个 Radio 由自己的 label 命名，Field 的标签命名的是整个 RadioGroup（role=radiogroup），description / error 仍到达每一项。

相关

Input · Textarea · Select · Checkbox · CheckboxGroup · Switch