---
title: 单复选
slug: 单复选
category: 组件
figma_node_id: 1:16
figma_page_name: ＞单复选
aliases: [Radio, Checkbox, 单选, 复选, 单选框, 复选框, RadioGroup, CheckboxGroup]
last_extracted: 2026-05-19
status: ok
---

# 单复选

> 在一组选项中选择一项（单选 Radio）或多项（复选 Checkbox）的输入控件。如流单复选按平台分桌面端 / 移动端两套，按形态分类型 1（与列表 / 组件组合）与类型 2（独立列表场景），覆盖默认 / hover / 按下 / 选中 / 未选禁用 / 已选禁用六种状态。

## 类型与号型

### 形态分类

| 形态 | 适用 |
|---|---|
| 单选框（Radio） | 一组互斥选项中选择一项 |
| 复选框（Checkbox） | 一组选项中选择零项 / 一项 / 多项 |

### 应用场景分类

| 类型 | 适用 |
|---|---|
| 类型 1 | 适用于与其他列表等元素共用时（与其他组件组合使用） |
| 类型 2 | 适用于列表类选择器，一般单独使用；如成员选择器 |

> 类型 1 适用于与其他列表等元素共用时。
> 类型 2 适用于列表类选择器，一般单独使用；如成员选择器。
> 类型 2 适用于独立出现的列表时，具体状态参考列表规范。

### 切图尺寸（来自 Figma 标注）

| 平台 | 切图尺寸 |
|---|---|
| 桌面端 | 14 × 14px |
| 移动端 | 24 × 24px |

## 尺寸规格

桌面端规范画板：1280 × 2472px。

| 元素 | 规格 |
|---|---|
| 桌面端切图 | 14 × 14px |
| 移动端切图 | 24 × 24px |
| 选项文字 | 13px Regular，行高 13px（桌面端）/ 14–16px（移动端） |
| 状态标签文字 | 12px Regular，行高 12px |
| 章节标题 | 24px Medium |

## 状态

完整状态枚举（来自 Figma 状态文字）：

| 状态 | 含义 |
|---|---|
| 默认（未选） | 未勾选的常态 |
| Hover | 鼠标悬停（桌面端） |
| 按下 / 点击 | 鼠标按下 / 触摸按下 |
| 选中 | 已勾选 |
| 取消勾选 hover | 已勾选后再次悬停（提示可取消） |
| 未选禁用 | 视觉上保持未选，但不可点击 |
| 已选禁用 | 视觉上保持已选，但不可点击 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` | 默认底色 |
| 默认描边 | `#C7CDD9` | `C-Coolgray50-暗`，14×14 描边 |
| 选项文字（主） | `#11141A` = `fill_OLAEMA` | 13px Regular |
| 选项文字（次 / 已选） | `#17181A` | 中间灰阶 |
| 状态标签文字 | `#5C6473` = `fill_UHESP7` | 12px Regular |
| 选中态背景（强调色） | `#3377FF` | 通用主色（与品牌主色 `Brandblue60 #165DFF` 略有偏差） |
| 选中点 / 勾对勾色 | `#FFFFFF` | 反白对勾 |
| 已选禁用降饱和 | `#9EA0A3` 类灰 | 禁用文字色 |
| 未选禁用背景 | `#F2F4F7` = `C-Coolgray30` / `#EAEDF2` = `C-Coolgray40` | 禁用底色 |
| 占位灰底（示例区） | `#F6F6F6` | 设计说明区背景块 |
| 浅边线 | `#E1E6F0` = `C-Coolgray50` | 分隔线 |
| 警示色 | `#FF5300` | 表单错误（与文字组合时） |
| 渐变 Union 装饰 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 设计说明区背景 |

> 关联 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

### 排版方向

| 方向 | 适用 |
|---|---|
| 竖版排列 | 选项较多 / 文字较长时使用 |
| 横版排列 | 选项 ≤4 项且文字较短时使用 |

### 间距

- 选项之间垂直间距：本页未明确定义，参考 [列表](列表.md) 行距规范
- 选项与选项之间横向间距：参考示例区，约 120–150px（x 坐标 308→456→580→704→852 步进 ~120）
- 切图与文字间距：约 6–8px

## 文案规则

- 选项文案默认占位：`选项` / `选项文案` / `这里是选项`（Figma 占位）
- 一组选项的标签放在选项组的**上方或左侧**，避免与单个选项的文字混淆
- 选项文字超长时换行，不省略——保持完整可读
- 单选默认值：可"不选中任何项"或预选第一项，业务自定

## 交互行为

- **单选（Radio）**：点击其他项时，当前项自动取消勾选
- **复选（Checkbox）**：每项独立切换，不影响其他项
- **半选态**（部分选中）：复选框可显示半选状态用于"全选"按钮的中间态
- **键盘 Tab**：聚焦后空格切换；上下箭头在 Radio 组内移动焦点
- **禁用态**：不响应点击 / hover；视觉降饱和
- **取消勾选 hover**：已选中状态再次 hover 时给出"可取消"视觉提示

## 示例

![桌面端单复选全集](../图片/组件/单复选/desktopcheck.png)
![移动端单复选全集](../图片/组件/单复选/desktopcheck.png)
![单选框-状态枚举](../图片/组件/单复选/desktopcheck.png)
![复选框-状态枚举](../图片/组件/单复选/desktopcheck.png)
![竖版排列](../图片/组件/单复选/desktopcheck.png)
![横版排列](../图片/组件/单复选/desktopcheck.png)
![类型1-与列表组合](../图片/组件/单复选/desktopcheck.png)
![类型2-独立列表](../图片/组件/单复选/desktopcheck.png)
![状态-默认](../图片/组件/单复选/desktopcheck.png)
![状态-Hover](../图片/组件/单复选/desktopcheck.png)
![状态-按下](../图片/组件/单复选/desktopcheck.png)
![状态-选中](../图片/组件/单复选/desktopcheck.png)
![状态-取消勾选Hover](../图片/组件/单复选/desktopcheck.png)
![状态-未选禁用](../图片/组件/单复选/desktopcheck.png)
![状态-已选禁用](../图片/组件/单复选/desktopcheck.png)
![布局间距标注-桌面端](../图片/组件/单复选/desktopcheck.png)
![布局间距标注-移动端](../图片/组件/单复选/desktopcheck.png)

## 设计考量 / 原文摘录

> 适用于与其他列表等元素共用时。
> 适用于列表类选择器，一般单独使用；如成员选择器。
> 适用于与其他组件组合使用。
> 适用于独立出现的列表时，具体状态参考列表规范。
> 切图尺寸：桌面端 14\*14px；移动端 24\*24px。

- **类型 1 vs 类型 2 的本质区别**：类型 1 是"与其他组件并存"的紧凑形态；类型 2 是"独立列表场景"的扩展形态（参考列表规范的行高 / hover / 分隔线）
- **桌面 14px vs 移动 24px**：移动端触控区域需 ≥24×24px 才能保证命中率
- **取消勾选 hover**：用细微视觉提示告诉用户"再点一次可取消"，减少操作焦虑

## 不推荐用法

- 一组选项 ≤3 项时使用下拉选择（应改用单复选，可见性更强；详见 [下拉选择](下拉选择.md) 不推荐用法）
- 用 Radio 承担多选场景（语义错误，应改用 Checkbox）
- 选项文字截断或省略号（破坏可读性）
- Radio / Checkbox 视觉混用（圆形 Radio 配方形 Checkbox，让用户误判单 / 多选）
- 不在选项组顶部 / 左侧提供标签，让用户不知道选项的整体含义
- 用单复选表达"二态即时开关"（应改用 [开关](开关.md)）

## 关联

- 二态切换对照 [开关](开关.md)
- 列表内嵌排布 [列表](列表.md)
- 表单内排布 [表单](表单.md)
- 多于 4 项选项时使用 [下拉选择](下拉选择.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
