---
id: "checks"
title: "单选、复选与半选"
category: "选择组件"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-checks"
source_data: "../component-data.json"
official_components: ["radio", "radio-group", "radio-button", "checkbox", "checkbox-group", "checkbox-button"]
template_components: ["el-checkbox", "el-checkbox-button", "el-checkbox-group", "el-divider", "el-radio", "el-radio-button", "el-radio-group"]
scenario_count: 8
verification: "scenario-checklist-not-full-test-pass"
---

# 单选、复选与半选

专题 `checks` · 选择组件 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`radio`、`radio-group`、`radio-button`、`checkbox`、`checkbox-group`、`checkbox-button`。

本页模板直接使用的 Element UI 标签：`el-checkbox`、`el-checkbox-button`、`el-checkbox-group`、`el-divider`、`el-radio`、`el-radio-button`、`el-radio-group`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：少量互斥选项默认用普通单选圆点；允许并存默认用普通复选方框。先决定选择规则，再决定是否需要本页演示的按钮式呈现。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 选择数量（用途） | 单选只能选一个，复选可以同时选多个。 | 由业务约束决定，不能因为更喜欢圆点或方框而互换。 |
| 普通与按钮式（呈现方式） | 按钮式只改变选项的呈现，不改变单选或复选规则。 | 默认用普通标记；明确需要把简短选项连续展示为一组按钮时才用本页按钮式呈现，同组保持一致。 |
| 分组与全选（功能配置） | 组名、全选和受限项处理组织同一组候选。 | 项目较多时按真实分组组织；全选只作用于声明的可选项目，不能选中禁用项。 |
| 已选、半选与禁用（自动状态） | 已选来自当前值；半选由部分子项选中计算；禁用来自条件限制。 | 半选只用于分组复选，不是可任选标记；选择变化后自动更新，单选没有半选。 |

使用边界：不要把单选、复选、按钮式、半选列为四款任选样式。

## 组件规则

- **CHECKS-R01**：先按业务数量约束选择单选或复选：互斥项默认用普通单选，可并存项默认用普通复选。按钮式只是呈现方式，不改变选择规则；组名、每项标签和禁用原因均须可读取。
- **CHECKS-R02**：复选覆盖未勾选、已勾选、半选和禁用状态。全选仅作用于明确作用域，不暗示全库数据已选。
- **CHECKS-R03**：半选反映子项部分选中；点击全选后全部选中，再点清除当前组。
- **CHECKS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **CHECKS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **CHECKS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **CHECKS-R07**：单选和复选的焦点跟随圆点、方框或按钮式选项；组级必选校验由宿主表单提供，就近显示错误红文字并关联组名。不要给整组选项套输入框蓝边或错误红框；禁用项不参与新操作，修正后清除对应组的错误。
- **CHECKS-R08**：密集选择用组名组织，组内保持正常文字与行距；全选/半选只统计可选项目，禁用项不因全选变为可用。选项帮助就近展示，长组选项区滚动，底部说明与确认保持可见。
- **CHECKS-R09**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。
- **CHECKS-R10**：【未选】选择标记白底、边框灰，标签正文深灰；悬停不擅自改变选择值或给整行填选中浅蓝。
- **CHECKS-R11**：【单选与复选】单选圆标记与复选方框使用主题蓝；单选保留白色圆点，复选保留白色对勾。
- **CHECKS-R12**：【半选】仅分组复选的部分选中使用主题蓝方框和白色横线；不能将半选表示为单选圆点。
- **CHECKS-R13**：【键盘与禁用】可操作标记的键盘焦点使用操作蓝轮廓；禁用标记浅灰背景、边框灰，标签禁用灰，并保留选中形状。
- **CHECKS-R14**：【组级校验】仅有必选组约束并校验失败时显示错误红短提示；不把整个组伪装成红色输入框。
- **CHECKS-R15**：【组件边界】单选圆点、复选对勾和半选横线分别定义；单选没有半选。此组件没有输入触发框、候选项加载或无结果态。
- **CHECKS-R16**：带补充说明的选项分为两行：字段名称14px/400/21px，说明12px/400/18px、辅助深灰，间隔4px；复选框对齐字段名称第一行，不能下沉到说明旁。选中只改变适用状态颜色，不改变字号或字重。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **CHECKS-S01**：先分别核对单选与复选的选择规则，再核对普通标记与按钮式呈现；按钮式不改变单选/复选含义，半选不是另一种呈现方式。
- [ ] **CHECKS-S02**：当前核对全选、半选及受限禁用项；已勾选且禁用、最少/最多可选数量仅在宿主实际配置后验收，本页不声明已有这些完整示例。
- [ ] **CHECKS-S03**：组内方向键；组级标签；默认值 / 受控更新 / 清除
- [ ] **CHECKS-S04**：本页核对普通与按钮式单选/复选的选中、半选、悬停、键盘焦点和禁用项隔离。当前未接入组级必填校验，不按矩形输入框套红边规则。
- [ ] **CHECKS-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。
- [ ] **CHECKS-S06**：检查单选切换、复选半选/全选和禁用项隔离；宿主配置必选校验后，另验组级错误提示、关联名称及修正恢复，不按矩形输入框验收。
- [ ] **CHECKS-S07**：当前分组示例核对部分选择半选、全选/取消排除受限项及禁用原因可读；长组滚动在宿主提供长列表后验收。
- [ ] **CHECKS-S08**：关联验收：单行选项在本页检查；带说明的双行选项到列设置和导出专题检查名称14px、说明12px及首行对齐。选择状态不改变字号或字重。

### 专题验收重点

部分选中→半选；全选→全部勾选；禁用灰 不随全选误改变。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<el-radio-group v-model="radioValue">
<el-radio label="A">选项 A</el-radio>
<el-radio label="B">选项 B</el-radio>
<el-radio label="C" disabled>禁用项</el-radio>
</el-radio-group>
<el-divider>
</el-divider>
<el-checkbox :indeterminate="checkedItems.length===1" :value="checkedItems.length===2" @change="toggleAll">全选本组</el-checkbox>
<el-checkbox-group v-model="checkedItems">
<el-checkbox label="子项 A">
</el-checkbox>
<el-checkbox label="子项 B">
</el-checkbox>
</el-checkbox-group>
<p class="help">按钮式选项：左侧仍为单选，右侧仍为复选；只改变呈现方式，不改变可选数量。</p>
<div class="demo-line">
<el-radio-group v-model="buttonRadio">
<el-radio-button label="A">
</el-radio-button>
<el-radio-button label="B">
</el-radio-button>
</el-radio-group>
<el-checkbox-group v-model="buttonChecks">
<el-checkbox-button label="A">
</el-checkbox-button>
<el-checkbox-button label="B">
</el-checkbox-button>
</el-checkbox-group>
</div>
<!-- reference-pattern-grouped-checks-pattern -->
<section class="reference-supplement">
<h4>分组复选与受限选项</h4>
<grouped-checks-pattern>
</grouped-checks-pattern>
<p class="reference-note">参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。<a href="https://resycb.axshare.com/#id=u80zov&amp;p=会员列表c&amp;g=1" target="_blank" rel="noopener noreferrer">查看参考页</a>
</p>
</section>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：历史样板规范 67；2026-09-15 参考抽样：https://resycb.axshare.com/#id=u80zov&p=会员列表c&g=1。
- [打开本专题页面](../index.html#spec-checks)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`checks`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

自定义示例 `grouped-checks-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。

组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 未选 | 选择标记白底、边框灰，标签正文深灰；悬停不擅自改变选择值或给整行填选中浅蓝。 |
| 单选与复选 | 单选圆标记与复选方框使用主题蓝；单选保留白色圆点，复选保留白色对勾。 |
| 半选 | 仅分组复选的部分选中使用主题蓝方框和白色横线；不能将半选表示为单选圆点。 |
| 键盘与禁用 | 可操作标记的键盘焦点使用操作蓝轮廓；禁用标记浅灰背景、边框灰，标签禁用灰，并保留选中形状。 |
| 组级校验 | 仅有必选组约束并校验失败时显示错误红短提示；不把整个组伪装成红色输入框。 |

单选圆点、复选对勾和半选横线分别定义；单选没有半选。此组件没有输入触发框、候选项加载或无结果态。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 会员列表首列勾选与表头全选](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)
- [新增账号 · 新增总代 · 所属币种与终端复选](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md)
- [取款审核 · 审核列表首列与批量选择](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md)
- [账户调整审核 · 账户调整列表 · 单选与批量勾选](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md)
- [广告管理 · 广告列表 · 勾选与批量删除](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md)
- [公告管理 · 公告勾选与自动弹窗类型选择](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md)
- [通知管理 · 消息勾选、发送设备等复选](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md)
- [推广报表 · 日报 · 报表列设置内字段勾选](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md)
- [推广报表 · 报表列设置内字段勾选](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md)
- [运营总览 · 指标或比较项勾选](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md)
- [客服工单管理 · 工单条件与订单选择](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)