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.
Ask your AI
Go through the form code I'm pasting below and audit every checkbox and radio. Wherever a single-answer question like a payment method or shipping option uses a checkbox, switch it to a radio (exactly one selection — picking a new one automatically clears the previous), and confirm that independent on/off questions like agreeing to terms line by line correctly stay as checkboxes. Also flag anywhere the shape convention is broken (checkboxes should be squares, radios should be circles) and any radio group with nothing selected by default. For each issue give me a 'current → recommended control → why' table plus the fixed code.
This form has [list of questions — e.g. payment method, interests, shipping option, terms agreement]. For each question, first decide whether it allows several answers at once or accepts only one, then assign a control: checkbox (square) for the multi-answer ones and radio (circle) for the single-answer ones. For every question you make a radio, preselect one sensible default — usually the most common or safest option — and hand me the markup for each field along with the reasoning behind each call.
Set defaults for the radio groups I'm pasting below. In each group, preselect exactly one item — the most common or safest choice — so people don't pick from scratch every time and the form never submits with an empty value. One exception: for sensitive choices like consent to collect personal data, leave the default off and let the user turn it on themselves. For each group, note which item you defaulted to and why it's the safe pick, and add a one-line note on any group you deliberately left empty.