I have a project requirement where our users need to be able to make 1 or 2 selections out of 4 possible options.

Along the lines of:

What is your favourite food? (Pick up to 2)

  • Pizza
  • Chocolate
  • Cheese
  • Milk

I'm having a hard time finding best practices on which input to use for this use case. Here are the options I can see:

  1. Checkbox with 4 options. When 2 options are selected either:
  • Disable the other two options or
  • Show an error message if a third selection is made.
  1. Multi-Select combobox with the same behavior as above. (Not as good as the checkboxes as it requires more clicks)

Any thoughts or resources would be greatly appreciated!

3 Answers 3


Using the right input/control at the right place is always a challenge while designing forms. A checkbox control has three states: unselected, selected, and intermediate (where a list of sub-options is grouped under a parent option and sub-options are in both selected and unselected states).

In your case, I would stick with the checkboxes. Checkboxes are standard for when multiple options are available and the user has to select one or more options from them. Selecting multiple options in a list provides a better experience using checkboxes.

The alternative would be toggle switches. However, there is a chance of getting confused with the on/off state of a toggle switch. Sometimes it gets difficult to understand whether the switch is showing state or action.

When more than three options are selected, hopefully, there is a "Next or Continue" button, I would throw some validation next to the button stating that they cannot select more than two options.

  • Agree that checkboxes are probably most familiar and intuitive for users. If there is a next/ continue button, explain up-front that user is asked to select 1 or 2 options. I would recommend to prevent the user from making a selection that would result in an error message (why torture the user to allow an action that you know upfront is not possible). So disable the Next/Continue button if no options are selected. And either disable (visibly) to select a third option, or selecting a 3rd option will automatically deselect the last chosen option.
    – wintvelt
    Apr 23, 2021 at 16:33

Have you considered a drag and drop area?

enter image description here



Hye Dave,

I would stick to using checkboxes. You can study the food ordering app as this is a common case. Example: 1) Choosing toppings for your pizza 2. Choosing different cake slices for a cake combo.

This is the approach taken from two food ordering apps:

  1. Add a helper text beside Form Label (Select up to 2)
  2. Even after user has clicked two options and wanting to click the third, nothing will happen
  3. Disabling the other options after user already selected max options could bring a negative connotation that the option is not available in-store/ for purchase.

Hope that helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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