1

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:

Example of how to design a form element with a small number of options

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?

4

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

1

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

1

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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