Why should I use radio buttons and checkboxes?

Question

I can build all the functionallity of a checkbox and a radio button with a select/dropdown, which results in a more lined up interface and I get around with lesser different types of GUI-elements.

So why should these elements be used anyway.

Answer 1

Checkboxes vs. Select:

To replicate checkbox functionality (choose 0 or x out of n), you'd need to employ a multiselect element. There's a lot of research out there indicating that most users are unaware of how to select multiple items in a multiselect element.

---

Radio Buttons vs. Dropdown:

It really depends on your scenario.

Scenario 1: "Please select your country from this list of several hundred"

^{download bmml source – Wireframes created with Balsamiq Mockups}

• The label clearly indicates the kind of options available – no surprises here
• A dropdown will make sense in terms of decluttering the interface/hiding unnecessary information from the user

Scenario 2: "Do you like ice cream?"

^{download bmml source}

• The dropdown hides important information (the availability of an option other than "Yes" or "No") from the user.
• The amount of space saved (2 vertical units) by a dropdown is negligible.

---

tl;dr: Whether to use Radio Buttons or Dropdowns really depends on your use case. Every time you use a multiselect, a cute kitten dies.

Answer 2

Radio buttons:

++ Options are visible (Dropdown: needs a click to reveal)
++ Selecting an option takes only 1 click (Dropdown: 2 clicks)

Checkboxes:

++ Options are visible (Dropdown: needs a click to reveal)
++ Everybody knows how to multiselect (Dropdown: need to press ctrl/cmd key)

Answer 3

At first, checkboxes and radiobuttons make choices visible and don't require any additional actions to display the set of choices.

Second, their form displays without any text explanations the possibility to make one-from-many or many-from-many choice — and 'cause checkboxes and radiobuttons are recognisable, basic patterns, these elements have great affordance. In dropdowns and selects it will require additional cognitive efforts to understand the possibility of multiple choice, or any additional labels.

At third, dropdowns and choices can't display single checkbox choice correctly — usually it will require two choices ("yes"/"no") and a lot of actions instead of simple click.

And fourth, selects can be perceived as textareas, what makes additional confusion to users.

So, it is not so simple, and lined-up interface made in visual form made of selects and dropdowns will not show the difference in essence and will be much more harder to use.

Answer 4

For small numbers of options checkboxes and radios:

• Show what all the options are straight away.
• Require fewer mouse clicks to interact with.
• Are more accessible via the keyboard as drop downs have no way to show the list in some browsers.

Answer 5

Just to toss in my two cents, one thing that really irks me is when you have a radio button with only two options, such as "Do you want a cat?" -> "( ) Yes ( ) No". Checkboxes make a lot more sense here ("[ ] I want a cat").