Checkbox
复选框
Aliases:复选框勾选框多选框打勾框勾选项勾选框选择
What is it
Square toggles for a set of independently selectable items, flipping between checked and unchecked on click. A parent can show an indeterminate state when only some children are checked — used for bulk selection, filters and consent.
Interactive playground
Try it. Make an informed choice.Select and clear several independent options.
Loading lab…
What to look for
- 01Allow independent choices; do not use checkboxes for exclusive values.
- 02Make the label and box share a click target.
✓ When to use
- Multiple options can be selected independently
- Checking list items before a bulk action
- Single standalone confirmations like agreeing to terms
✕ When not to use
- Mutually exclusive choice — use radios
- Immediate-effect on/off settings — a switch is clearer
- More than ~15 options needing search — use a searchable multi-select
Variants
Single
单项
One standalone item
Group
分组
Parallel items, bulk-checkable
Indeterminate
半选
Parent dash state for partial selection
Implementation
appearanceaccent-colorborder-radius: 4pxtransitionFor custom styling hide the native appearance and draw the check with a pseudo-element or inline SVG — accent fill with a white check scaling in; the indeterminate state draws a dash. The quick native route is accent-color. Make the whole label row clickable with a ≥ 24px hit area; drive the parent's indeterminate property from JS.
Platform API
<input type="checkbox">role="checkbox"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| HTML | <input type="checkbox"> |
| shadcn/ui | Checkbox |
| MUI | Checkbox |
| AntD | Checkbox |
Related concepts
A set of circular buttons for mutually exclusive options — exactly one selected per group, never unset. The core contrast with checkboxes is single versus multi selection; the dot fills with animation on select, and with 2–5 options a visible radio group beats a dropdown.
ComponentsSimilarA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsSimilarA panel concentrating filter controls beside the list (or revealed in a drawer or popover): checkbox groups, radios and sliders compose the current query. It syncs with the list to refresh result counts, echoes selected conditions and offers clear-all.
ComponentsSimilarChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed with