What should we call this drop-down alternative?

Question

Reading this article on better form design, one of its tips is to "Show all selection options if under 6", as opposed to hiding the options in a dropdown list.

See this example they provide:

I've seen this pattern before and intuitively understood it, but somehow I never thought of it as an alternative to dropdowns. I don't think it's a hard and fast rule to say "under 6", but it is a helpful tool to add to our toolbox.

I want to document this pattern in our library but I don't know what to call it.

Bootstrap documents how to convert buttons into checkboxes or radio buttons, but doesn't give this option a succint name. Material doesn't cover this in their components guidelines.

What would you call this?

Answer 1

Apple refers to controls of this type as “Segmented Controls” and recommends five or fewer segments on iOS. See https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

Checkboxes vs. Radio Buttons is another relevant reference. Your proposed use of segmented controls is consistent with guideline #8, “If possible, use radio buttons rather than drop-down menus.”

Here’s an example of segmented controls implemented with HTML (a radio button group) and CSS: https://codepen.io/fstgerm/pen/Jafyj

Answer 2

I think the pattern you are referring to is a button group. See the links below:

https://getbootstrap.com/docs/4.1/components/button-group/ https://www.w3schools.com/howto/howto_css_button_group.asp

Answer 3

Sorry but isn't this just a pretty radio button? I have the exact same element in our UX pattern guide and its just a styled Radio button (unless you can select more than 1 at which point it becomes a checkbox).