How to make users choose at least one option in a list but allow additional selections

Question

We know that radio button groups are used to limit user input to just one selection in a list of items, and that checkboxes are used to let users select from 0 to a set number of options from a list of items.

What is a commonly accepted design pattern to ensure that the user will select at least one item from the list, but can optionally select additional items. It doesn't seem to fall into the typical use cases for checkboxes, and using a dropdown list that has line items that can be checked or unchecked also doesn't seem to be very intuitive.

Is the best way to make this clear to the user to provide labels and guidance? Are there other UI elements or design strategies that work better?

Answer 1

This is the basic/ typical usage of checkboxes. I don't see the need for a select.

By definition, checkboxes are used to let a user select zero, one, or more options of a limited number of choices. To make the user choose at least one option, make the input required. It is not different if you use an input that has the type file or a select, it must be required to have at least a valid selection.

If the list is long, you can use a vertical scroll with a search in the list. The user could also add a custom topping if you need this option. Anyway, in this case, for me, checkboxes are the obvious solution.

Update: Of course, if the list is really big and if it is searchable, the lists with checkboxes hidden into a dropdown is a known solution. For multi-selecting in big lists, are also common similar solutions: dropdowns that user can both scroll through or search in, and display the items as pills in the input field. For your case, checkboxes are enough and offer the best user experience, in my opinion.

Answer 2

From your question, what I understood was initially nothing will be displayed on the result screen, and the user must select at least one item from the list to proceed? Is that what you are looking for?

Usually, the drop-down with the checkbox acts as a filter. If the user hasn't selected any of the items from the drop-down it shows the complete result.

If the user chooses one or more items from the drop-down list, it will filter the result and show only those items, and there will be a clear-all option to clear the filter. Also, you can add the selected tags with a close icon on top of the screen, which will help the user to deselect any item in a single click.

Is this makes sense? or can you explain in more detail the issue you are facing?

Answer 3

Replace the placeholder text "None selected" with "Select at least one"

Answer 4

I think this should be handled in verification and not be part of the widget logic.

The nicest solution would be: A list of checkboxes, one checkbox which is usually taken is preselected. The user can select others and / or deselect the preselected option and is done.

If no option is usually taken (or the user deselects all). Then start with the error case by writing something like "choose at least one option" next or below the list. This then disappears when something is checked.

I would not use an asterix, as per the "Apple Human Interface Guidline":

Defer showing a required indicator next to a required field until the user tries to proceed without entering a value.

Answer 5

In my opinion, you shouldn't need to group it with the dropdown list. You can just show it directly, to cut the unnecessary step.

Answer 6

Lists with checkboxes are for selecting one or more items. If the UI makes it appear to the user does not have to select an item, you can place an asterisk next to the heading and note that items with an "*" are required. If the user fails to select an item, you can show an error message.

I agree with an above response that a dropdown box with a list of items to select is unusual. You may want to open a popover menu or exposed menu.

Are you building for the web, ios, or android?

Answer 7

This falls under the category of Good defaults vs Validation. What you do here depends a lot on the content you are managing.

So let's get straight to the cookies.

the user will select at least one item from the list, but can optionally select additional items

The user must select at least one item

Unless it's paramount for the user to think about the question and fill the answer (e.g. EULA agreement), you should pre-select a valid option and render a valid state, so the user is only left with the choice to optionally select additional items or complete the process.

At this point the component should have pre-filled and shouldn't allow an invalid empty state by selecting nothing (deselect all). In generic terms, just don't give the user the option to fail.

Optionally select additional items

This part is more functional than anything else. I'll give you a symbolic solution for the toppings example from your question, feel free to visually style it as you like.

• Initial list of options

  ✔ No toppings (default)
  + Cheese
  + Tomatoes
  + Mozzarella

• Once the user selects a topping, "no toppings" should get automatically de-selected.

  No toppings
  + Cheese
  ✔ Tomatoes
  + Mozzarella

• When the user deselects all the topping he previously chose, the default option should get selected again automatically.

• On "No toppings" click, reset the selection and highlight default again.

last but not least, keeping an eye on the cognitive load helps keeping the design sane. So you don't go overboard with feedback messages or design convoluted components just to avoid a couple of labels.

+ means addition, ✔ means selected, No toppings is special so has no + but has selection state ✔

Answer 8

Labels and instructions are necessary but sometimes aren't enough. When a control seems obvious in its usage, it can be tempting to skip the extra instruction. In this case the user is best to be guided through the process by breaking the process up into a mandatory step and an optional step.

Technically this shouldn't be very difficult to implement: Remove the mandatory selected option from the additional list, add it again (unselected) when the mandatory option has changed.

Answer 9

In my humble opinion, using CheckBoxes is not a "pretty" UI or UX in this context. A better alternative would be using Google Material Chips. https://material.io/components/chips

Image taken from the following link about Chips: https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f However, you can also use a customized , self-made "options list"!