Best input to select 2 of 4 options

Question

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.

2. 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!

Answer 1

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.

Answer 2

Have you considered a drag and drop area?

https://codepen.io/julienreszka/full/abpPWqw

Answer 3

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