Dropdown vs. Radio button vs. Checkboxes: Which one to use?

Checkbox vs radio, the quick answer: use radio buttons when the user must pick exactly one option from a short list, and checkboxes when they can pick any number of options, including none. Picking one radio clears the others in its group; each checkbox is independent. Use a dropdown when there is one choice to make from a long list and screen space matters.

For a single yes/no, a lone checkbox works for an optional opt-in ("Email me offers"), but use a pair of Yes/No radios when you need an explicit answer. Radio buttons are called option buttons in Microsoft Office.

Updated October 2026. Added sections on the single-checkbox case, switches, and accessibility (HTML, grouping and keyboard behaviour), checked against WAI-ARIA, MDN, GOV.UK and Apple’s guidelines.

Option	Radio button	Checkbox	Dropdown
How many can be selected	Exactly one	Zero, one or many	One (usually)
Options are	Mutually exclusive	Independent of each other	Mutually exclusive
Can the user clear it	No, only switch to another option	Yes, click again	Sometimes, if there is an empty option
Options visible at once	All	All	Only after opening
Best number of options	2 to about 6	1 (a yes/no) to about 10	Around 7 or more
Shape	Circle	Square	Field with a chevron
Keyboard	Tab into the group, arrow keys move and select	Tab to each box, Space toggles it	Arrow keys or typing once focused
HTML	<input type="radio">, same name	<input type="checkbox">	<select>
Typical example	Delivery speed	Newsletter topics	Country

The shape is the convention, but do not rely on it alone. The GOV.UK Design System says not to assume users will know how many options they can pick from the visual difference between radios and checkboxes, so put it in the question: "Select one" or "Select all that apply".

The platform guidelines agree on the basic split. Material Design 3’s web components describe radio buttons as letting people “select one option from a set of options”, and checkboxes as allowing users “to select one or more items from a set”. In Apple’s Human Interface Guidelines, where radio buttons are a macOS control, they are “typically displayed in groups of two to five” and “present a set of mutually exclusive choices”.

When it comes to choosing between a radio button or dropdown, there are a few UX considerations you should keep in mind. If you’re working on a web or app design, it’s important to choose the right input method for your users.

Before we jump into it, it’s important to note that it’s impossible to give any meaningful rules on UI that would hold across all contexts. You might want to refer to your platform’s UX guidelines for some guidance.

In this article, I will discuss when to use which UI control.

A checkbox is a perfect control to use when you want the user to be able to select one or more items from a list. For example, when you are creating a to-do list, you would want to use a checkbox for each task. This way, the user can select the tasks that they want to complete.

Learn how to design a ‘proper’ checkbox in this article.

A radio button is a good choice when you want the user to select only one item from a list. For example, when you are creating a survey, you would want to use a radio button for the question “What is your gender?” This way, the user can only select one answer.

Learn more about the behaviour of radio buttons in this article:

A dropdown is the best control to use when you want the user to select an item from a list of options. For example, when you are creating a form, you would want to use a dropdown for the question “What is your age?” This way, the user can select their age from a list of options.

Radio Buttons vs. Dropdowns

When deciding whether to use a radio button or a dropdown, ask yourself the following questions:

• How many options are there?
• How many items can the user select?
• How complex are the options?

If there are only a few options and the user can pick one, use radio buttons: every choice is visible and it takes a single click. If there are a lot of options, a dropdown saves space. If the user can pick more than one item from a long list, a multi-select dropdown is rarely the answer, because people struggle with Ctrl-clicking; a scrollable list of checkboxes or a searchable token field works better. We compare those in the best UI for multi-selecting from a list.

Also consider whether a dropdown is needed at all. Nielsen Norman Group points out that typing is faster than scrolling for familiar data: it is quicker to type "NY" than to find New York in a list of states, and nobody wants to pick their birth year from a scrolling menu. Learn more about how to better make this decision here.

Radio Buttons vs. Checkboxes

When deciding whether to use a radio button or a checkbox, ask yourself the following questions:

• How many items are there?
• Can the user select more than one item?

The number of items is not really the deciding factor here. The difference between a radio button and a checkbox is whether the choices are mutually exclusive. If picking one option should rule out the others, use radios. If each option is an independent yes or no, use checkboxes.

Three details trip people up:

• A radio group cannot be emptied. Once someone picks an option, they can switch but never go back to nothing. If "none" is a valid answer, add it as an option. NN/g recommends an explicit, neutral choice over expecting users to leave the group blank.
• Pre-selecting is disputed. NN/g says to “always offer a default selection for radio button lists”. GOV.UK says the opposite: do not pre-select radio options, because users are more likely to miss the question or submit the wrong answer. For questions where a wrong default matters, such as anything legal or financial, leave the group empty.
• "None" in a checkbox list needs special handling. GOV.UK puts the none option last, separated by an "or" divider, and unticks the other boxes when it is selected.

My rules of thumb are:

• if the option is boolean: checkbox
• if the number of options is 2 – 4: radios
• if the options have a lot of text: radios
• if there are lots of options: dropdown
• if there are LOTS of options: dropdown with search, like chosen

A single checkbox vs a pair of radios

A lone checkbox is the standard control for one on/off option. NN/g puts it plainly: “A stand-alone checkbox is used for a single option that the user can turn on or off.” The GOV.UK checkboxes component also lists “toggle a single option on or off” as a use.

The catch is that an unticked box means two things: “no” and “I didn’t see it”. In HTML, MDN notes that if a checkbox is unchecked when the form is submitted, “neither the name nor the value is submitted to the server.” So:

• Use a single checkbox when unticked is a safe default and needs no answer: “Email me product news”, “Remember me”, “I agree to the terms” (which you validate before submitting).
• Use Yes and No radios when you need the user to actively answer, or when “no” has consequences: “Do you have a disability?”, “Has your address changed?”. An empty radio group can be validated as unanswered. GOV.UK allows inline radios for exactly this case: only two options, both short.
• Never use a single radio button. Once selected it cannot be cleared, so the user is stuck with it.

Toggle switch vs checkbox

Use a switch when the change takes effect immediately, like a setting, and a checkbox when the choice is only applied after the user submits a form; Apple also advises “In general, don’t replace a checkbox with a switch” (HIG: Toggles). More in effective toggle buttons.

Accessibility: radios and checkboxes

• Use the native inputs. <input type="radio"> and <input type="checkbox"> come with keyboard support and screen reader roles for free. MDN: a radio group is defined by giving each button the same name, and “Only one radio button in a given group can be selected at the same time.” Give every input a <label>.
• Group with <fieldset> and <legend>. The W3C forms tutorial says “Radio button groups should always be grouped using <fieldset>”, with the <legend> acting as the question. Do the same for a set of related checkboxes. Keep the legend short, because some screen readers repeat it for every option.
• Know the keyboard behaviour. In a radio group, Tab moves focus into and out of the group as one stop, and the arrow keys move to the next or previous radio and select it (WAI-ARIA Authoring Practices: Radio Group). Checkboxes are separate Tab stops, and “pressing the Space key changes the state of the checkbox” (WAI-ARIA Authoring Practices: Checkbox). Custom-styled controls must keep this behaviour.
• Say how many to pick. Add a hint such as “Select one option” or “Select all that apply”, as GOV.UK recommends.
• Mixed state is for parent checkboxes only. A checkbox can show a third, “indeterminate” state (a dash) when some of its child options are ticked, such as a “Select all” box. In HTML that is set with JavaScript, not an attribute.

Radio button alternatives

Radio buttons are not the only single-choice control. A segmented control works well for two to five short options that change a view, such as Day, Week and Month. A switch replaces a pair of radios when the setting takes effect immediately, such as turning notifications on or off; we cover when that works in effective toggle buttons. For a single yes/no inside a form that is submitted later, a checkbox is still clearer than either.