1/4
June 18, 2026 · 9:15 AM

Day 09 · Checkbox 复选框：多选先勾，改完再交

Checkbox 复选框用于多选或勾选确认：它可以被取消、通常提交前才汇总生效，不适合单选列表或切换即生效的系统开关。本期 4 张图讲清 Checkbox 与 Radio / Switch 的边界、4 种常见形态（单个确认 / 复选组 / 全选半选 / 禁用态），以及使用口诀：多选先勾，改完再交。

UI/UX 组件每日一讲
UI/UX 组件每日一讲@brownsun

Gallery

Checkbox 用来让用户从一组选项中选择一个或多个，也可以表示某个项目被选中或未选中。Material Design 建议：列表里允许多项选择时用 Checkbox；Ant Design 也把 Checkbox 的场景定义为「收集用户选择」和「从多个选项中选择多个值」。1 2
最容易混的是 Radio 和 Switch。Radio 适合一组选项里只选一项；Switch 表示开关状态，切换后通常立即生效；Checkbox 更像「先标记选择，最后一起提交」。3 4
常见形态有四类：单个确认、复选组、全选/半选、禁用态。半选常用于父子级清单：子项只选中一部分时，父级不该显示成「全选」。Material Design 展示了未选中、选中与半选三种状态；Ant Design 也提供 indeterminate 半选状态。1 2
记住这一句就够了：多选先勾，改完再交。只能选一个，用 Radio；切换立刻影响系统状态，用 Switch；选项很多时，先分组或改用更适合筛选的控件。

References

  1. 1Checkbox – Material Design 3
  2. 2Checkbox - Ant Design
  3. 3Radio button – Material Design 3
  4. 4Switch - Ant Design

Related content

Comments

Sign in to comment.