3

I'm working on this UI element to replace the dropdown and multiple select UI rendered by browsers for the select HTML tag. I would like to show a list of options where users can click on each option to select/unselect it. Depending on the presence of multiple attribute, users should be able to select one or more items from this list of options. What is the name of such an UI element?

enter image description here

These are the goals I'm trying to achieve:

  • Should be able to see all the options, hence dropdown is not desirable
  • Should let users select one or multiple options
  • Selected option(s) should be highlighted
  • Should see the options inlined, similar to when display: inline-block is set.
  • Should not present the options in a grid because the option names can be of varying length
Improve this question
1
  • As @Seth Warburton has already mentioned in his answer below, radio buttons and checkboxes can serve the functional requirements. However, my question is not how to do this, rather what is this UI element called.
    – Raiyan
    Jul 23, 2016 at 17:09

4 Answers 4

Reset to default
5

You should focus first on the functional requirements, not the visual appearance as that's easily changed with CSS. There's two specific input elements that provide exactly the functionality you describe, radio and checkbox. Radios are for selecting one option from many in a list, while checkboxes are for selecting one or several options in a list.

From the W3C spec:

Radio: ‘The input element with a type attribute whose value is "radio" represents a selection of one item from a list of items (a radio button).’ https://www.w3.org/TR/html-markup/input.radio.html

Checkbox: ’The input element with a type attribute whose value is "checkbox" represents a state or option that can be toggled.’ https://www.w3.org/TR/html-markup/input.checkbox.html

Styling up <input type=checkbox> or <input type=radio> to look like your example is trivial, requiring only a few lines of css.

If you only want to describe the visual aspect of your illustration ‘group of buttons’ might be a good option, but I think that is misleading as these elements won't function like buttons. Overall I'd say ‘Checkboxes styled like buttons’ is probably the most accurate description to use here.

Improve this answer
9
  • +1 for the W3C reference to radio and check box. However I would never recommend changing the styling to a button - remember form follows function, it's not the other way around and you are likely to introduce some confusion.
    – SteveD
    Jul 22, 2016 at 9:22
  • @Splatz I didn't recommend it, but if the design calls for that then I think this is the best approach as it is semantically correct, and certainly a better choice tham <element type=select> if it's not going to look like a select element. <button> and <a> would also be the wrong choice as the intent is not to do something or go somehere. I agree with you though, if my requirements called for such functionality I'd use radio and checkbox elements with native styling.
    – Seth Warburton
    Jul 22, 2016 at 9:29
  • Everything you say is correct apart from "if the design calls for it". Even if it is semantically correct in the html, it is certainly not correct from a visual perspective, e.g it will look like a button when styled on the screen - so it is going to imply a certain expectation in the users mind.
    – SteveD
    Jul 22, 2016 at 9:45
  • @SethWarburton Thanks for bringing up the W3C docs. You're right, check boxes or radio buttons do serve the functional requirements here. But how do I name this altered representation if I wanted to communicate the idea to someone. I could say something like "I want a list of options which are actually radio buttons, but they should be inlined and the selected items should be highlighted and etc. etc." Communication would be simpler If there was a one word or one phrase name for this.
    – Raiyan
    Jul 23, 2016 at 17:00
  • 1
    @Raiyan If you only want to describe the visual aspect of your illustration ‘group of buttons’ might be the best option. That's not the same as ‘button group’ though, that as that name is already by a UI element that actually is a group of buttons. I'd say ‘Checkboxes styled like buttons’ is probably a more accurate description though.
    – Seth Warburton
    Jul 28, 2016 at 6:26
0

Button Group would be the most commonly used term, in my experience, for what you are describing and illustrating.

https://www.google.com/search?q=button+group

Improve this answer
2
  • I think you are incorrect - a button group is group of buttons which are being used to trigger some feature/function. What @Raiyan is showing are buttons being used to to select an option, e.g. essentially behaving like radio buttons.
    – SteveD
    Jul 22, 2016 at 9:17
  • @Splatz - similar to bold/italics/underline, or left/center/right justification in word processors. Button groups are commonly used is similar ways to radio buttons.
    – Nicholas Pappas
    Jul 27, 2016 at 1:57
0

I like this approach. When you have less than 5 options for users to select from, radio buttons or checkboxes are a good idea. I think you can design this interface similar to the wireframe and the front end developer will know what to use.

Improve this answer
0

The buttons inside a group are called "toggle buttons". I don't think the list has a standard name, though. Perhaps call it "toggle button group"?

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.