Checkbox
A control for independent on/off choices, any number of which can be selected at once — including none.
UI ComponentsA checkbox answers one yes/no question, independently of every other checkbox near it. That independence is the whole distinction: a group of checkboxes is a group of separate questions that happen to be adjacent, not a set of alternatives. If choosing one should unchoose another, the answer was a radio button.
Two details carry most of the usability. The label must be clickable — a 16px box alone is a poor target on touch, and wiring the label doubles or triples the hit area for free. And a parent checkbox controlling children needs a third visual state, indeterminate, for “some but not all”; without it, the parent lies about what is selected.
Checkbox vs toggle switch
A checkbox states an intention that takes effect when the form is submitted. A toggle switch changes something immediately. Using a toggle inside a form with a Save button asks people to guess which one of those is happening.
In practice
An admin panel let users select rows with checkboxes and nested them under a “select all” parent with only two states. Selecting 3 of 50 rows showed the parent unchecked; clicking it selected all 50, wiping the user's partial selection. Adding the indeterminate state and making the parent's click toggle only the visible page ended a recurring support complaint.
Where teams get it wrong
- Labels that are not clickable, leaving a 16px target on touch screens.
- No indeterminate state on a parent that controls a group.
- A single checkbox for something that takes effect immediately — that is a toggle.
- Negative labels (“Do not send me updates”), which make an unchecked box ambiguous.
- Custom checkboxes built from divs, with no keyboard focus or space-to-toggle.
Learn more
You may ask
Frequently Asked Questions
When should you use a checkbox instead of a toggle?
Use a checkbox when the choice is submitted with a form and takes effect on save. Use a toggle when flipping it changes something right away. Mixing them in one panel makes it unclear which settings are already live.
What is an indeterminate checkbox?
A third visual state for a parent checkbox whose children are partly selected — neither checked nor unchecked. Without it a “select all” box shows as empty when three of fifty rows are chosen.
Related terms
All terms- Radio ButtonA control for choosing exactly one option from a visible, mutually exclusive set.
- Toggle SwitchA control for a setting that is on or off and takes effect the moment it is flipped.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- Bulk ActionsSelecting many records and doing one thing to all of them — and designing what happens when it works for most but not all.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us