We have found a component on a website* with a selection that works like this:

  • There's a radio button All.
  • There are multiple checkboxes, one for each value.
  • It's possible to select one ore more of these checkboxes
  • It's possible to select all items – by selecting all checkboxes or by using the All option.
  • It's possible to deselect all values, which is the same as selecting all values.

This means, there's never an empty selection.


Example

● All             ⚬ All             ⚬ All             ● All
◻ V1              ◻ V1              ◻ V1   → click →  ◻ V1
◻ V2   → click →  ◼ V2              ◼ V2              ◻ V2
◻ V3              ◻ V3   → click →  ◼ V3              ◻ V3

Legend:

  • Radio: (unchecked) (checked)
  • Checkbox: (unchecked) (checked)

I've created a small prototype where you can see it in action and try it yourself on jsfiddle.net.


I kind of like this concept but I'm not really sure about it. We like to use it together with a short list of 4-8 items where it's mandatory that one, multiple or all items are selected.


My questions are:

What is the name of this pattern?

Is it easy to understand?

Is it a good way to represent this kind of selection?

Is it better to rely on a more common approach, which people might be familiar with:

◩ All  → click →  ◼ All
◻ V1              ◼ V1
◼ V2              ◼ V2
◻ V3              ◼ V3

Legend:

  • Checkbox: (incomplete selection)

*Unfortunately I can't recall where we have seen this.

  • This is my first question. Please feel free to change the title if it is not representing the question good enough or doesn't fit the site. Also, please feel free to edit the tags, as I'm not sure, whether I've chosen the best. – insertusernamehere Sep 16 at 18:48

Hmm, I'm finding your prototype quite confusing to use. I find it very confusing that, after selecting all the values, it automatically deselects them and selects the "All" button at the top. Also, the "All" button is not really a radio button as there's only one choice. Normally radio buttons have 2 buttons or more.

I would use a much more conventional pattern like the ones in Angular JS Material:

enter image description here

enter image description here

If you need people to select either a) all or b) at least one then I would use a validation message to enforce that.

  • I can understand that it might be confusing at first - I think that was also my first impression when the pattern was found by our designer. I must say, that I like the idea of using less clicks to select items. If in the initial state all elements are selected, you must first deselect all (which should not be possible actually) and select the ones you want again. Isn’t this an advantage even though it might be strange at first? Ah, and maybe important: We thought about using this in a filter in a SPA which is available throughout the whole application. – insertusernamehere Sep 17 at 15:59
  • This is a good standard design to build upon, having a checkbox that fills all checkoxes, but don't rename "Select All" when checking it. In your scenario it says that "Un-Select All is enabled", which is a strange state. If it was a button that didn't have pressed/unpressed states it would be ok to change the text. – Henrik Ekblom Sep 19 at 13:04

Here's what I'd do.

  • Use checkboxes for all choices, INCLUDING, the ALL choice.
  • Place ALL as the first option.
  • If ALL is clicked, mark all the options as checked (including ALL).
  • Display the ALL choice like the other choices. No indenting required.
  • You can display an incomplete selection for ALL if you want to remind (nudge) the user towards this option.

you're mangling different input types for the same action: select.

Keep the inputs consistent to avoid confusing the user. In your example the select all state (selected radio) results in 3 unselected states (unselected checkboxes). This confused me greatly and would others.

Use the example as suggested by Andrew, above.

You need to use all items with checkboxes. You can also change top checkbox's label whether it's selected/unselected with a counter.

We are using this approach in our application like this below:

1 - none 2 - indeterminate state 3 - all selected

enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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