UI fundamentals · 6 min read
Checkboxes vs radio buttons
Learn when people can pick many things, and when they can pick only one.
Explained like for kids
Imagine a pizza topping menu. Sometimes you can add many toppings. Sometimes you can pick only one drink size. Checkboxes and radio buttons are those two different menus — and mixing them up confuses everyone.
Examples
Each example has a kid-friendly “why,” then a clear Don't and Do with a real UI mock so you can see the difference.
Many choices vs one choice
Like for kids: If your teacher says “circle every fruit you like,” that’s checkboxes. If they say “pick only one favorite,” that’s radio buttons.
Don’t
Using radio buttons when people can pick several flavors
Radio buttons lock you into one pick. People think they can only choose one topping when they should be allowed many.
Add flavor
Only one can stay selected
Do
Use checkboxes for multi-select lists
A checkmark feels like ticking items off a list. Perfect when more than one answer is okay.
Add flavor
Don’t ask “no” questions with a check
Like for kids: It’s weird if a form says “No chocolate” and you have to check it to mean you don’t want chocolate. Kids (and adults) get mixed up.
Don’t
Checkboxes like “No vanilla” / “No caramel”
People expect a check to mean “yes, I want this.” Negative labels flip that mental model.
Add flavor
Wait… do I want these or not?
Do
Positive options: “Vanilla”, “Caramel”…
Check = want it. Uncheck = don’t want it. Simple brain math.
Add flavor
Big click targets
Like for kids: Trying to tap a tiny checkbox on a phone is like trying to poke a pea with your thumb. Give people a bigger target.
Don’t
Only the tiny square is clickable
Hard to hit, especially on mobile. People miss and get frustrated.
Hard to tap the tiny square
Do
Make the whole label (and row) clickable
Bigger hit area = faster, fewer mistakes. Add hover/tap feedback so the zone is obvious.
Row highlight shows the hit zone
Show options instead of hiding them
Like for kids: If there are only a few milk choices, don’t hide them in a closed drawer. Put them on the table so you can see them all.
Don’t
Dropdown for 5 milk options when you have space
Opening a menu adds extra work. People must remember what they saw.
Milk choice
Extra click just to see options
Do
Use radio buttons when space allows
All options stay visible. Scan, click, done — fewer brain steps.
Milk choice
Remember these
- Checkboxes = pick as many as you want (like toppings).
- Radio buttons = pick only one (like small, medium, or large).
- Make the whole row clickable, not just the tiny circle or square.
- Say “yes” options only — never “No vanilla” style checkboxes.
Inspired by Dos and Don’ts for Form Input (Anthony Tseng) and Practical UI forms guidance. Rewritten in plain language for learning — not a reprint of the originals.