Options to choose from options: radio buttons, checkboxes and dropdown menus

Written by Ignacio O'Mullony: Web designer.
· 4 minute read

Radio buttons, checkboxes or dropdown menus? Which should you choose for your website?

 

Picking something in real life is sometimes as easy as just pointing with your finger. However, on a screen it’s not that easy, especially when you have a lot of options. In this post we’ll see what alternatives there are and when to use each on your website.

 

Radio buttons vs checkboxes

 

How many options can users select? If the answer is one, the standard is to use radio buttons. If there are more than one, go for the checkboxes. 

A radio button allows the user to select only one option, so it’s very important that if you go for this selector and want to be sure users will choose exactly the option they want, you need to consider giving them an option saying something like ‘none of the above’.

Checkboxes, on the other hand, are completely optional, and users should be able to advance even without selecting a single one. That’s why for example the answer to accept cookies in a website is a checkbox and not a radio button.

 

Dropdown menus


It doesn’t matter whether there’s only one possible answer or multiple ones, sometimes the range of options is too long to be shown because it would take a lot of valuable space. In that case the best format is using a dropdown menu. 

However, dropdown menus are a dangerous tool. The elements within a dropdown menu should be ordered in a logical way for the user, but sometimes if for example you don’t follow an alphabetical order, be sure the items are grouped in smaller sections so they can be scanned easily. If your research shows users will know the answer in advance (for example, imagine you are asking them for the country they come from), explore the possibility of including a search bar. See how Google Translate applies this concept, but an alternative design is having the search bar in the dropdown box, letting clear you can actually type something on it by displaying something like “select or type the language”