跳到主要内容
Termlib

UI 组件 · 表单输入

复选框

Checkbox

也叫：多选框、勾选框、复选按钮、Check Box

可以打勾和取消的小方框，用来从一组选项里选多个，或单独勾选「同意协议」这类确认项。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

「感兴趣的方向」用一组横向排列的复选框：前端、后端、设计、产品，最多选 3 个，选满后其余选项变为禁用。点击文字也能勾选；下方单独放一个「我已阅读并同意用户协议」复选框，不勾选时提交按钮禁用。

发给

01判断

你的内容是这样吗？

对照两列，确认复选框是不是你要找的。

符合这些情况，用复选框

  • 从一组选项里选任意多个，比如兴趣、权限、要导出的字段
  • 单独一项需要用户明确确认，比如同意协议、记住登录状态
  • 在表格或列表里勾选多条记录，再做批量删除、批量导出

是这些情况，换成别的

  • 一组选项里只能选一个时

    改用单选框

  • 开启或关闭一个设置并且立即生效时

    改用开关

  • 可选项有几十个以上时，应该用可多选的下拉选择或穿梭框

    改用下拉选择穿梭框

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只能选一个的选项也用复选框，用户勾了两个才发现报错

  2. 02

    只有小方框能点，旁边的文字点了没反应

  3. 03

    设置页里用复选框做立即生效的开关，用户不知道还要不要点保存

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一个小方框和右侧的文字标签组成，有未选、已选（打勾）、半选（横线）三种状态，多个一起组成复选框组。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1文字左边的小正方形，选中时里面有对勾
  2. 2多个选项纵向或横向成组排列，可以同时勾选好几个
  3. 3表格第一列是一排小方框，表头有一个全选框

04解释

详细解释

复选框是一个小方框，点一下打勾，再点取消。一组复选框之间互不影响，可以选任意多个，比如「兴趣爱好」勾选多项；单独一个复选框常用来表示确认，比如「我已阅读并同意用户协议」「记住我」。表格里的复选框用来勾选多行做 批量操作，表头还有一个全选框，部分选中时显示一条横线（半选状态）。

复选框、单选框、开关 经常被混用：复选框可以多选，是方形的；单选框一组只能选一个，是圆形的，选了别的会自动取消前一个；开关表示某个功能开或关，拨动后立刻生效。复选框的勾选通常要等点「提交」「保存」才生效。

开发者信息
术语 ID
component-checkbox
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[type="checkbox"]:not([role="switch"]):not([class*="Switch"]):not([class*="switch"])
  • [role="checkbox"]
  • .ant-checkbox-wrapper
  • .el-checkbox
  • [class*="MuiCheckbox-root"]
  • .arco-checkbox
  • .t-checkbox
  • .n-checkbox
  • [data-slot="checkbox"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • checkbox
  • check-box
  • checkbox-group
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Checkbox
  • CheckBox
  • CheckboxGroup
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30