A control with functionality similar to multiple checkboxes
Problem and current situation:
I'm looking for a filtering control with a functionality that is similar to multiple checkboxes: The user has a (short) list of options, and he can tick some or all of the options.
As seen in the screenshot below, today the user can select "EEE" or "FFF" or "ALL".
But in the upcoming update, I'm going to have more than 2 possible categories, i.e. I'm going to have "EEE", "FFF", "GGG", "HHH" etc. So the current control is no longer relevant.
Possible solutions:
I've considered multiple checkboxes, but it looks kinda bad, and if you put them vertically as suggested in some places (for example here and here) it takes a lot of real estate, which I can't afford.
- The main alternative I found was chosen's multiple select control (can be seen here)
But I don't think it suits my needs, because I only have a few (4-5) items in the list, and because I want the user to see all of the options without activating a control (typing or clicking on the control).
- I'm also considering the following control, in which the user clicks the categories he want to "turn on" by clicking a button, and the button changes its color.
I'd be happy to get your feedback for the controls I'm considering, and finding out about a new controls that might suit my needs.
Additional needs:
- My users are "semi" technological, but it is relatively important for me to use as standard as possible controls.
- Also, I prefer that it will not be possible to deselect all of the options, because in my application this state is useless. It is not a must though
Thanks a lot!
Related questions without relevant answer
- Are two toggle buttons better than a tri-state switch?
- What is a more intuitive way to present a 3-option toggle?
- What is the best UI for multi-selecting from a list?
- How should a multi-state toggle slider with more than two states be implemented?
- What do you do when you have too many choices in a checkbox field set?
- Multi-selection dropdown list implementation best practice