Is there a good way to communicate choose at least one?

Question

I am wondering if there are any known good ways to concisely convey to users that they must must choose at least one option.

• Check boxes convey that the user can select 0 or more items.
• Radio buttons convey the user can only choose exactly 1 item.

I could not find any existing convention to convey that the user MUST choose at least one option -- other than explicitly stating "Choose at least 1".

I have thought of 2 potential solutions but wanted to know what others think,and if they have any other solutions.

Option 1: Mix Radio Buttons and Check Boxes

• When zero items are selected show all un-checked radio buttons, indicating that the user MUST select an option (this option would only be for an initial state where a default selection CAN NOT be made for them).
• When one item is selected show the selected item as a checked radio button with the other options appearing as un-checked check boxes, (hopefully) indicating that the user CAN NOT un-check their current selection, but can select more options (the user is unable to un-check the radio button).
• When there are 2 or more selections all selected options become checked check boxes, and un-selected options become un-checked check boxes -- indicating that the user can deselect any option.

Option 2: Use Check Boxes and Errors

• Everything functions as check boxes
• Allow user to deselect ALL check boxes
• As soon as 0 check boxes are selected, show an error message and highlight the group (ex: changing the color to red, or draw a red box around it)
• NOTE: this option would probably be best if the user can see text ahead of time that tells them they must choose at least one.

Bonus Points -- for answers that answer the initial question and go above and beyond

• Bonus Points for also discussing how to best indicate this accessibly for users that don't use a visual interface (HTML)
• Bonus Points for discussing some of the other "complex" number of selections like "choose at least 2", "choose between 3 and 5", "choose at most 7", etc. (I will probably have to change the question title if people answer this). NOTE it looks like "0 or 1" is already covered here here and here.

Answer 1

The normal way to solve this problem is to use validation (or errors as you put it).

I would not advise mixing control types within a single field as it's overly complex and confusing to a user who knows what a checkbox and radiobutton are.

From a Usability perspective you should aim to tell the user what the state of the system is. So if zero selected items is invalid, showing the user that this is invalid is helpful.

It's common to see guidance for these kind of controls such as "Tick all that apply" so that subjectively might be a better wording than "Select at least 1" depending on use case.

There are some more subtle issues you would need to decide the answer to here, such as when the errors messages appear and disappear and whether validation is client side, server side or both (top tip, it should probably be both).

In terms of accessibility you should be using aria tags to denote the error if the message is purely visual. Specifically you should use aria-invalid to tell the user agent then is an error https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute

For bonus points, your validation for more complex scenarios such as "no more than 7" is really heading towards imparting your business logic onto the user. Which is fine, but again this would normally be achieved through validation which can be programatically generated and tested.

Answer 2

If you can dynamically add question fields, then another solution is to break it into stages:

1) Ask the null state question first with radio buttons.

2) If the option(s) which requires multiple selections is selected, direct the user to the next question.

Examples:

A.

Do you have any pre-existing conditions?

🔘 Yes 🔘 No

Only appears if "Yes" selected:

Which condition(s)? (Select all that apply.)

☐ Abc

☐ Efg

☐ Xyz

☐ Other: ____________

B.

What county do you live in?

🔘 Abc 🔘 Xyz 🔘 Neither

Only appears if any option other than "Neither" is selected:

What cities/areas have you lived in?

☐ Abc

☐ Efg

☐ Xyz

☐ Unincorporated area

The above list would be exhaustive for the selected county.

C.

Assuming it is already known the user likes peanut butter sandwiches:

What's your favorite topping on a peanut butter sandwich?

🔘 Jelly 🔘 Honey 🔘 Only peanut butter 🔘 Other: ____________

Only appears if an option aside from "Other" is selected:

At which meals do you eat peanut butter and [topping] sandwiches?

☐ Breakfast

☐ Lunch

☐ Dinner

☐ Snack

Since it is already known that the user eats one of the options that we are interested in further polling on, we know they have eaten it at one of these meals and they should know to select at least one.

---

This would still need to be paired with validation to make sure they didn't accidentally neglect to select one.

Answer 3

If you are not constrained to using Checkboxes and Radio Buttons, a ListBox (aka multiple select list) is often used when at least one selection is required. A helpful reminder/prompt to the user they can choose more than one can be included.

In HTML, it's represented as (from W3Schools)

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Edit to add: the explicit "Choose one or more" hint/reminder could be unnecessary if it's made clear through the context that the user can select more than one. For the above example, if the input label was "Which car manufacturers would you consider buying from?", there is an indication to the user that they are allowed to pick more than one option.