Selection Patterns

The difference between a checkbox and a radio button is not visual preference — it is a semantic statement about the nature of the choice. Using the wrong pattern misleads users about what they are selecting.

Checkboxes

Checkboxes represent independent binary choices — each option can be selected or not regardless of the others. Use checkboxes when multiple options can be true simultaneously: “Notify me by email”, “Notify me by SMS” can both be selected. A single checkbox is appropriate for a standalone binary decision: “I agree to the terms.”

Radio buttons

Radio buttons represent mutually exclusive choices — selecting one deselects all others. Use radio buttons when exactly one option must be chosen from a set, and all options can be shown simultaneously. In most cases, provide a default selection — a radio group with no option pre-selected requires explicit resolution before the form can proceed, and users may submit without noticing they skipped the question. The exception: when no option is genuinely neutral or appropriate as a default — such as a preference question where any pre-selection might be wrong or presumptuous — leaving the group unselected is correct, since an incorrect default the user does not notice is worse than no default at all. Show all options simultaneously so users can see the full set of alternatives before selecting.

Toggles

A toggle represents a binary on/off state that takes immediate effect — not a form field that is submitted later. Toggles are appropriate for system settings (“Dark mode”, “Notifications”) that change something the moment they are switched. Do not use a toggle for a choice that will be submitted with a form — use a checkbox. The toggle implies immediate consequence; if there is no immediate consequence, the control is misleading.

Dropdowns

Dropdowns hide options behind an interaction. Use them when there are too many options to show simultaneously (more than 5–7) and the user is likely to know what they are looking for. Do not use a dropdown when there are 2–4 options — show them as radio buttons instead, which requires no additional interaction to see the alternatives. Do not use a dropdown when the user needs to compare options — a visible list allows comparison; a dropdown does not.

The takeaway

Match the control to the nature of the choice: independent multi-select → checkbox; mutually exclusive single-select → radio; immediate binary effect → toggle; large option sets → dropdown. Mismatching creates ambiguity about what “selecting” means, which options are possible, and whether choices are mutually exclusive.