8

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.

enter image description here

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?

9 Answers 9

5

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.

enter image description here

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.

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?

1
  • Yes, that's right. The user must choose at least one item but can select more if they choose to.
    – Michael Lai
    Dec 1, 2020 at 23:13
2

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

1
  • Another option for the placeholder text is "Select one or more..."
    – Benjamin S
    Dec 9, 2020 at 14:14
2
+50

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.

1

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.

additional toppings1

1
  • 1
    "Additional" implies that zero is valid number to select. Maybe "Select your topping(s)". Dec 3, 2020 at 2:26
1

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?

1
  • +1 this is for a web application
    – Michael Lai
    Dec 6, 2020 at 6:20
1

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 ✔

0

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.

enter image description here

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.

0

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

enter image description here 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"! enter image description here

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.