混灵画布Design SystemVersion 1.1.3
Liquid GlassLOCAL PREVIEW

单选框

单选框的规范、变体与应用示例。

2 个规范与展示分区 · 独立组件页面

单选框

组件规范与变体。组合示例保持自身业务职责。

Radio

单选框规范

组件规范与变体。组合示例保持自身业务职责。

职责与结构

单选框用于在同一组互斥选项中选择一个值。多项选择用复选框;选项较多或名称较长时使用选择器;面板切换用 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。组合应用见本页末尾引用。