Forms & Input
Checkbox / Radio
Checkboxes and radio buttons are two ways to pick from a set of options, where checkboxes let you turn on several at once while a radio button allows exactly one.
Definition
Checkboxes and radio buttons both let people choose from a list of options. The difference comes down to how many things they can pick at once. A checkbox lets someone turn on as many items as they like at the same time, while a radio button allows exactly one choice out of the group, so selecting a new one automatically turns off whatever was selected before. That is why checkboxes fit independent on/off questions where each item stands on its own, and radios fit mutually exclusive questions that have to narrow down to a single answer. This difference in behavior is what decides which input you should reach for, so before you build the screen, settle one thing first: does this question allow several answers, or does it accept only one?
Why does it matter?
Which one you use completely changes how people read the screen. When someone sees radio buttons, they immediately understand that only one answer is needed here. When they see checkboxes, they read it as permission to pick several. In other words, the shape of the input tells them the rule before they even try. Flip that signal and people get stuck trying to select more than one, or they check several boxes when only one is allowed and hit an error later. This matters most for choices where only one option can hold true, like a payment method or a shipping option: pick the wrong control and an invalid combination gets submitted, leading to a mistake that is a hassle to undo. Choose the right control instead, and the rule communicates itself without any extra helper text, so the form runs leaner and with fewer errors.
Common mistakes
- Using a checkbox for a question that should allow only one answer. If someone checks two payment methods, the system has no way to know which one to use, and it ends up throwing an error at submission and sending the person back to the start.
- Breaking the shape convention. Checkboxes are squares and radios are circles, and if you ignore that promise and mix the two, people can no longer tell how many options they may pick just by looking, so they get confused every single time.
- Leaving a radio group with nothing selected. Without a default, people have to pick one from scratch every time, and if they skip it by accident the value stays empty and the form is likely to error out.
Practical tips
- Split them by intent: independent on/off items use checkboxes, and choices that must narrow to one use radios. Agreeing to terms one line at a time is checkbox territory, while a payment method that has to resolve to a single answer belongs to radios.
- Always keep the shape convention. Leave checkboxes as squares and radios as circles, and people will instantly recognize from the icon alone whether they can pick several or just one.
- Preselect one sensible default in a radio group, usually the most common or safest option. A preset choice saves people from picking from scratch every time and cuts down on empty submissions. One exception: for sensitive choices like collecting personal data, leave the default off rather than on.