30

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.

Image showing check boxes, radio buttons, and various potential ways to visually represent the ability to 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.
  • I once took a test with this issue. The first few questions had one answer but following questions had multiple answers that all had to be selected, sometimes 3 out of 4 had to be selected. I don't think simple validation is the answer to this question. – Keith Loughnane Feb 18 at 8:55
  • 2
    why not <select size=10 multiple required>...<select>? – mothmonsterman Feb 18 at 15:48
  • @KeithLoughnane A combination of instructions and validation, as doubajmcdonald suggests should still be sufficient to clarify the requirements. When a required number of options are selected, instructions stating "Select at least 3" can communicate requirements while a dynamic counter can provide additional feedback, e.g. "1 selected of 3 required". – maxathousand Feb 18 at 18:35
  • 1
    Why not just mark it as required? How is this different than a text box, which can hold zero or more characters? – Kat Feb 18 at 19:39
  • 1
    @allenretz Instead of writing "bonus points" you can open a bounty with a custom description and actually give bonus points to people. – Giacomo Alzetta Feb 19 at 8:20
38

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.

  • 24
    Doesn't "tick all that apply" still leave open the possibility that none apply? – Daniel Wagner Feb 18 at 13:15
  • 2
    It does, you could partner "Tick all that apply" with a validation message of "Select at least one" or alternatively "Tick all that apply (at least one)" or "Tick all that apply (min 1)". That was kind of what I was getting at with the issues around when to display messages, it could be that sticking with "Tick all that apply" is sufficient as guidance and the validation message is "Select at least 1" which appears on submit. – dougajmcdonald Feb 18 at 13:19
  • 2
    @DanielWagner If the user is supposed to select all that apply, but are required to select one, doesn't that indicate the user will always have some option that applies? If not, the user is selecting an option that does not actually apply and the data is incorrect. – GrumpyCrouton Feb 18 at 16:14
  • 2
    @GrumpysaysReinstateMonica you can always include an option "None"/"Otherwise" or something similar. Most questions I've seen that specify you need to give at least one answer do it this way, and I think it's mostly to force the user to actually answer the question instead of just clicking "next" – Emil Bode Feb 18 at 20:08
  • 3
    @EmilBode In that case, "None" could just be a default option. – GrumpyCrouton Feb 18 at 20:29
11

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.

  • 5
    More work, but as a user, I prefer this if it's not buggy, assuming the form isn't small and there are various differing parts of the form to fill out; that way, I can save time reading, scrolling, and thinking if I check "No". – Andrew Feb 18 at 21:09
4

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.

  • From existing web tools, this is probably a really good way to do this, especially when using "required" like @happytime-harry comments above. <select name="cars" size="4" multiple required>.One drawback is that on desktop it sometimes looks the same as a regular select and you do have to add a reminder and potentially additional "how to" instructions because of the low discover-ability on desktop. – allenretz Feb 19 at 1:49
  • While it is a standard, I have never encountered it in the wild, so user might not be familiar with it. The fact that you suggest and the example page includes a reminder does not bode well. Secondly, it does not solve the initial task of conveying mandatoriness. – knallfrosch Feb 19 at 9:40
  • 1
    I don't like list boxes for general users because it's not always clear that more than one selection is possible. This isn't helped by the fact that list boxes are sometimes used when only one selection is possible. Works nice for users with more computer experience though. – called2voyage Feb 19 at 13:39
  • 2
    Just make sure your list box supports Ctrl+Left Click and Shift+Left Click, even if it uses another paradigm for multiple selections. It always annoys me when those aren't available. – called2voyage Feb 19 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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