Radio Button or Dropdown Menu

Forms (input fields, entry validation, error reporting) are an essential part of the user experience, on mobile apps and on web applications. They are the best source of interaction with the user.

Two very important controls are radio buttons and dropdown menus. Besides user input, they are often used to filter results and for navigation. They can be used interchangeably but when we take a closer look at use cases, it becomes obvious, that it is better to use radio buttons in some cases and dropdown menus in others.

When deciding which element to use, we can take into account that radio buttons are used when we have a small number of choices at our disposal, usually less than 5. It is also better to use radio buttons if we want to highlight all the available options (usually when the differ a lot from each other, when they are very specific or hard to predict). Another use case for buttons is when we want the difference between choices to be clearly visible and it is important that all choices are listed one next to the other. it is also practical to use them when having clearly listed choices and a fast response time is important.

In contrast, dropdown menus are the better choice when we have many options that can be listed in some logical order, for example percentage values, dates and time etc. We also use dropdown menus when the default value is recommended and others are not (for example when installing programs). Dropdown menus are also the better choice on smaller screens, for example on mobile devices.

In some cases, especially if we have a custom page and elements, we want to use either radio buttons or dropdown menus depending on the size of the screen. For example, we want to use radio buttons on large screens, but change them to dropdown menus on mobile devices. The easiest way to do this is by creating 2 different fields and display or hide them based on the screen size. On larger screens, we hide the dropdown menu:

select { display: none; }

And on mobile devices, we hide the radio buttons and display the dropdown menu:

.radio { display: none; }
select { display: inline-block; }

The problem with this method is that we will have to edit 2 fields. If they will stay the same forever, this is not a problem. However, if we expect the choices to change in the future we can define the choices that are available with a few lines of jQuery. That way we avoid having to change available choices separately for the dropdown and the radio button.

We first create an empty dropdown list and append it to an element with the id element:

$("<select />").appendTo("#element");

We then populate the menu with options we take from the buttons:

$("input[type='radio']").each(function() {
 $("<option />", {
     "value"   : $(this).val(),
     "text"    : $(this).val()
 }).appendTo("select");
});

This way, we create a dropdown menu that changes dinamically depending on radio buttons.

To improve user experience, it is important to select an appropriate way of displaying content and spare the user of having to do a lot of extra clicking and scrolling up and down the page.