复选框输入

它让用户在一组选项里同时选中零项、一项或多项,每项都可以独立开关。

  • 前面可以打勾的小方框
  • 能同时勾上好几项的方块
  • 点一下出现对号的格子
  • 多选框
  • 勾选框
  • 选择框

示例

Webcheckbox原生支持几个状态同时在场,才比得出差别
  • (无)

    未选中

    空心方框

  • :checked

    已选中

    填色,里面一个勾

  • :indeterminate

    半选

    下属只选了一部分,画一横

  • :hover

    鼠标悬停仅指针

    边框变成主色

  • :focus-visible

    键盘选中仅键盘

    外面套一圈光环

  • :disabled

    不可用

    灰底灰字,点不动

带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。

带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。

Web / iOS / Android 对照

使用规范

什么时候用

  • 用户可以独立选择多个项目,且需要一直看见每项的选中状态

什么时候别用

  • 只能选一项时应使用单选按钮;单个设置立即生效时移动端更适合开关

容易混淆

给 AI 的提示词

这条词条还没有经过验证的实现提示词。