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 a lot of options, or if the user can select more than one item, use a dropdown. If there are only a few options, or if the user can only select one item, use a radio button. 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?
If there are a lot of items, use a checkbox. If there are only a few items, use a radio button.
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
