Checkbox
复选框
A small square the user can tick, for picking any number of several independent options at once.
Live Demo
Actually clickableWhat you just saw:The square at the left of each row in a shopping cart, the check in front of "Allow notifications" in Settings, the circle in front of every item in a to-do list.
What it actually is
The semantics of a checkbox are "independent on/off": ticking it does not affect the one next to it. The difference from a radio button is not visual but logical — one allows multiple selections, the other allows exactly one.
Anatomy · What it's made of
Box方框
18–20px with a 1.5px border
Check Mark对勾
Appears when selected, optionally animated
Label文字
Left-aligned with the box on the same baseline
Indeterminate半选态
Shows a dash when only some children are checked
Disabled禁用态
Checked but no longer changeable
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Any number of several options can be selected | Yes |
| You need a "Select all" control | Yes |
| An independent toggle (enabling a feature) | Yes |
| The options are mutually exclusive and only one can be picked | No |
| Ticking it triggers a dangerous action immediately | Depends |
A checkbox works for a mandatory declaration such as "I agree to the terms", but it is a poor stand-in for an explicit "Agree and continue" action.
On mobile, make the whole row tappable in a checklist — a 16px checkbox on its own is a very small target.
Similar Patterns
Don't mix these upCheckboxCurrent
复选框
A small square the user can tick, for picking any number of several independent options at once.
Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
In one line:A small square the user can tick, for picking any number of several independent options at once.
Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
Switch
开关
A control that slides left and right, on or off, with the state always plainly visible.
Checkbox
复选框
A small square the user can tick, for picking any number of several independent options at once.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a checkbox list with a Select all control: the "Select all" row at the top supports an indeterminate state, every row is tappable across its full width, and the selected count shows on the right.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few options people can tick.
Say this instead
Add a Checkbox list: the whole row is tappable (label wraps the input), a "Select all" row with an indeterminate state, a live selected count at the top, and rows at least 44px tall for comfortable mobile tapping.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.