COMPONENT 29 · Selection & Values

复选框

Checkbox

也叫Check BoxTickbox勾选框NSButton switch

独立开启一个选项，或从集合中选择零到多个项目。

Toggles an independent option or selects zero or more items from a set.

ANATOMY & USAGE

结构与使用建议

组成部分

方形控件
选中标记
文字标签

适合使用

多个选项彼此独立，用户可以多选时。

不建议使用

一组互斥选项只能选择一个时。

键盘与无障碍

使用原生 checkbox 与关联 label；混合状态设置 indeterminate/aria-checked=mixed。

DESCRIBE IT TO AI

这样告诉编程助手

实现复选框（Checkbox）：独立开启一个选项，或从集合中选择零到多个项目。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<fieldset class="demo row">
  <legend>复选框</legend>
  <label>
    <input type="checkbox" name="choice"> 开启通知</label>
  <label>
    <input type="checkbox" name="choice"> 每周摘要</label>
</fieldset>