职责与结构
单选框用于在同一组互斥选项中选择一个值。多项选择用复选框;选项较多或名称较长时使用选择器;面板切换用 Tabs。
fieldset / legend 命名组 + 同一 name 的原生 radio + 可点击完整标签 + 帮助和组错误。不同表单或不同组不能误用同一选择范围。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 未选/已选 | 组内最多一个 checked;是否预选由业务决定,不能用任意默认值掩盖必需的判断。 |
| 必填/错误 | required 表达必须选择;本页提交时校验组,并把错误关联到可编辑项。修正后清除错误。 |
| 禁用 | disabled 选项不可选且说明原因;已有选值与禁用状态分别保留。 |
| 只读结果 | 原生 radio 无 readonly;只读详情展示所选选项名称,不提供伪可编辑控件。 |
复用 .check-label、原生圆形控件、--color-primary 与共享焦点;选项使用 --control-lg 最小命中高度和 --space-3 组内间距。
交互与状态示例
交互与无障碍
保留浏览器原生 Tab / 方向键 / Space 单选组行为,不再绑定第二套 roving 或点击切换逻辑。选中状态使用 checked,组名和选项名稳定。长标签自然换行,提交失败聚焦首个可编辑项;成功只确认本页选择。
接入约定
| 项目 | 规范 |
|---|---|
| name / value / checked / required / disabled | 使用原生 radio 属性。name 定义互斥范围,value 是业务值;每个选项有标签,组通过 legend 命名。 |
| input / change / reset | 原生事件;本页 data-family-radios 的 change 同步读数并清除已修复错误。重置恢复最初无选择状态。 |
| 表单值 | 使用 FormData 或 checked 项读取单一值;未选时明确为空,不伪造默认值。 |
查看最小使用示例
<fieldset><legend>处理模式</legend>
<label class="check-label"><input type="radio" name="mode" value="direct" required>直接处理</label>
<label class="check-label"><input type="radio" name="mode" value="batch" required>批量处理</label>
</fieldset>维护位置:scripts/family-specimens.mjs;示例行为:scripts/family-specimens.js。组合应用见本页末尾引用。