Is this a good concept: "Select one or multiple items using checkboxes and use a radio button to select all"?

Question

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

Answer 1

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:

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

Answer 2

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.

Answer 3

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.

Answer 4

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