Checkbox 多选

简介

复选框是常见的选择控件之一，应用场景比较丰富。

• 用于表单及列表：复选框后一般跟随对象，通过“空”和“勾选”两种方式区分其后对象是否被选中，支持单选或多选。
• 用于确认清单：复选框后一般跟随对象，通过“空”和“勾选”两种方式区分其后对象是否开启。
• 关于层级：若对象存在多个且内含层级，可使用缩进来区分层级，同时上一级对象项目前的复选框可控制其下一级对象。

基本构成

基本样式

类型

多选框

多选卡片

尺寸

多选框

U-Design 目前对多选按钮区分了 3 种尺寸：大（lg）、中（md）、小（sm）。

大号按钮（lg）高32px，为目前的默认多选按钮尺寸。

在使用过程中可以根据布局空间，灵活使用不同尺寸的多选按钮。标注明细 >

多选卡片

依据内容大小自动撑满，与容器内间距保持16px即可。标注明细 >

基本状态

设计说明

原则

在界面中如何使用该组件？

1.符合用户认知

复选框是比较常见的选择控件并被长时间、广泛应用在各种页面或平台界面上。无论从样式还是操作定义上都已在用户中形成共识，因此在设计和应用上应该优先遵循这些规则，避免用户产生误解或付出额外的学习成本。

2.状态区分直观

确保默认与选中的样式差异明显，便于用户快速理解和区分。

3. 选项数量限制建议

• 作为表单选项：建议选项数目不超过5个，若选项过多建议分类或选用支持搜索的选择控件；常见问题>>
• 作为须知内容展示：建议多内容项时进行文案整合，避免出现多项待勾选项。

4. 内容长度限制建议

• 作为表单选项：建议选项字符不超过7个；
• 作为须知内容展示：建议长度不超过2行，详情可提供查询链接。常见问题>>

5. 父子层级选项展示建议

若选项中存在父子级关系：

• 子项相对于父级选项应向右缩进排列；常见问题>>
• 若父项被选中，则其相关子项自动全选；相反，则其相关子项全部未选；
• 若部分子项被选中，则且相关父项目为半选中状态。

场景

该组件应用于哪些场景？

1.用于页面或弹窗内表单

通过“空”和“勾选”两种方式区分其后对象是否被选中，支持单选或多选。

2.用于列表

通过“空”和“勾选”两种方式区分其后对象是否被选中，勾选后可激活批量操作。

3.用于确认通知或提示

通过“空”和“勾选”两种方式区分其后对象是否已知，对象中一般包含详情链接。

4.用于开关某项设置

通过“空”和“勾选”两种方式区分其后对象是否开启。

布局

在界面中如何摆放该组件？

1. 作为选项应用于表单中

建议将复选框置于项目左侧，方便用户快速区分选中对象与未选中对象。

2. 作为须知内容展示在操作附近

• 建议将复选框置于项目左侧，同时建议整个对象放置在操作左侧，提醒用户操作前完成阅读及确认；常见问题>>
• 换行时，仅与文本左对齐。常见问题>>

行为

当用户使用不同设备端访问平台或页面时，如何与界面中的按钮交互？

桌面端设备

• 鼠标：点击、悬停
• 热区：选择框，选项名称或自定义背景热区

移动端设备

• 鼠标：平板可外接鼠标，行为与桌面端设备一致
• 手指：点击
• 热区：选择框，选项名称或自定义背景热区

常见问题

须知内容换行对齐建议

仅文本居左对齐

复选控件包裹在文案中，不便于用户识别与状态确认

父子层级选项从操作逻辑到展示上需区分

使用缩进来区分父子级选项关系

无缩进展示不便于用户理解信息层级关系

选项数量建议不超过5个

数量合理的选项便于用户快速阅读

过多的选项建议选择其他选择控件并配合搜索

须知内容建议不超过2行

陈述简洁，必要时给予详情跳转

过长本文会让用户放弃阅读甚至降低好感

​

选项字符建议不超过7个

简洁且突出差异的描述更利于用户快速阅读

描述切忌啰嗦、反复过分冗长

​

操作前须知内容应靠近操作按钮

距离越近越能引起用户关注也更便于用户操作前确认

注意力被重要按钮吸引，距离较远的内容容易被忽略

​

勾选框不要被文案包裹

文本换行时，仅与文本左对齐。

勾选框与文案混排，难于被察觉

相关文档

1. Radio 单选
2. Select 选择器