radiogroup 属性在任何主流浏览器中都不生效,它仅存在于早期 html5 草案中,用于已废弃的 标签,现代标准已移除;单选组唯一可靠机制是 name 属性,同名 radio 自动互斥。

radiogroup 属性在任何主流浏览器中都不生效,它不是标准属性,也不被支持。
为什么 radiogroup 无法工作
该属性只出现在早期 HTML5 草案中,用于 <command></command> 标签(type="radio"),但从未被浏览器厂商实现。所有现代浏览器(Chrome、Firefox、Safari、Edge)均忽略该属性,既不触发行为,也不报错。
-
<command></command>标签本身已被废弃,HTML Living Standard 中已移除 - 即使手动写入
radiogroup="foo",DOM 中可读取该属性,但无任何运行时效果 - 没有对应的 JS API(如
element.radiogroup)或 CSS 伪类支持
实际单选组的正确实现方式
浏览器原生单选逻辑完全依赖 name 属性:同名的 <input type="radio"> 自动构成互斥组。
- 必须确保每个选项的
name值完全一致(大小写敏感、空格敏感) -
id和for需配对,否则点击 label 不会触发选中 - 不要用
radiogroup替代name——后者是唯一可靠机制
示例有效写法:
<input type="radio" name="theme" id="theme-dark" value="dark"><label for="theme-dark">Dark</label> <input type="radio" name="theme" id="theme-light" value="light"><label for="theme-light">Light</label>
Shadcn 或其他 UI 库中的 “RadioGroup” 是封装,不是 HTML 属性
像 shadcn/ui 的 RadioGroup 组件是 React 封装,其 “分组” 行为由组件内部状态和 value/onValueChange 控制,与 HTML 的 radiogroup 属性无关。
- 真正起作用的是
<input type="radio" name="...">的原生name,库只是帮你生成它 - 若出现跨题复用、状态残留,问题出在 key 冲突或未绑定
checked={value === item.value},而非缺少radiogroup - 添加
radiogroup属性对这类库毫无帮助,纯属冗余
别浪费时间调试 radiogroup——它从不存在于真实渲染流程中。盯住 name、value、checked 和 React key,才是解决单选逻辑问题的关键路径。











