1

I'm dealing with lots of complex search forms. When should I use grouped (toggle) buttons in place of radio buttons? Other than the fact that I find grouped buttons cleaner and easier to click on, I'm not sure how I can sell this to others. Radio buttons can go over multiple lines which is a huge benefit, but one could argue if that's the case, then why not use a drop-down? Should I do away with the radio altogether if I use grouped buttons? Is using both going to complicate the user? Thank you!

Bootstrap grouped buttons: https://v4-alpha.getbootstrap.com/components/button-group/

before and after

Improve this question

3 Answers 3

Reset to default
3

You have asked quite a few questions in this post.

When should I use grouped(toggle) buttons in place of radio buttons?

I think the toggle buttons are the more contemporary implementation of either/or selection. Radio button being the former. If you are going for a modern look, you should think of using toggle buttons. Reasons include,

  • More hit area for selection for an option in case of the toggle button. Radios don't always work on labels.
  • Possibly easier to grasp the selected option because there is no cognitive load for associating the right label with the right radio.

Couple of problems

  • It is important to note that toggle buttons don't work well with options having longer text length. Top to bottom radios work well in such cases.
  • It is hard or unconventional to show tab-based keyboard navigation on toggle buttons. Users are well-versed with tabbing on radios than toggles.

Then why not use a drop-down?

The biggest problem of dropdowns is that they hide values. Users need to go and open the drop down to see possibilities. Radios and Toggles show data upfront. If real estate allows and the number of options is very small, one should go for radio buttons/toggle switches.

Dropdowns on the other hand, handle scalability very well.

Should I do away with the radio altogether if I use grouped buttons?

I would be wary of mixing the two metaphors. I would stick with one. As a user it might confuse me on what basis you have chosen a radio vs a toggle.

Improve this answer
0

Functionally, they do the same thing.

I think this way of representing a set of options is more natural and provides a more natural reading order. Besides, it is less formy I would say, and gives a contemporary feel to the form.

Reading feels more natural because recognising what is selected comes at the moment of reading. In case of horizontally aligned radios you would read it: (not selected) option a, (selected) option b, (not selected) option c. Just not having this radio on the course of reading makes it more natural, methinks, in horizonal selectors of course.

But be careful with long selection lists — at some point decreased scannability of the options to choose from may become problematic. Having about 5 or more of options, or/and them being long can render this approach very inefficient and aligning them vertically may be crucial. For those cases, providing a radio list with options listed from top to bottom would be probably the best choice.

Improve this answer
0

Remember that you can also combine button groups with dropdowns in Bootstrap. For example, you could list the most common choices as the first few buttons in the group and then put less-common choices in a dropdown as the last button. For example:

Bootstrap button group with dropdown

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.