复选框输入
它让用户在一组选项里同时选中零项、一项或多项,每项都可以独立开关。
- 前面可以打勾的小方框
- 能同时勾上好几项的方块
- 点一下出现对号的格子
- 多选框
- 勾选框
- 选择框
示例
(无)
未选中
空心方框
:checked
已选中
填色,里面一个勾
:indeterminate
半选
下属只选了一部分,画一横
:hover
鼠标悬停仅指针
边框变成主色
:focus-visible
键盘选中仅键盘
外面套一圈光环
:disabled
不可用
灰底灰字,点不动
带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。
带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。
Web / iOS / Android 对照
Web原生支持
桌面与移动端现代浏览器
Checkbox
<input type="checkbox">
iOS需自己实现
iOS / iPadOS
Checkbox
苹果移动平台没有通用复选框组件,布尔设置通常用开关,多选列表通常用勾选标记表达。
通常怎么做:单个立即生效的设置用 Toggle;多选列表用 Button 或列表行配合对勾状态。
Android原生支持
Android 手机 / 平板
Checkbox
Compose Material 3: Checkbox / TriStateCheckbox
使用规范
什么时候用
- 用户可以独立选择多个项目,且需要一直看见每项的选中状态
什么时候别用
- 只能选一项时应使用单选按钮;单个设置立即生效时移动端更适合开关
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。