Best way to interact with a drop down, that has multiple selections

Question

I have created a drop down, and on the drop down you are able to make more than one selection (similar to checkboxes).

However, it does look like an ordinary drop down. I was wondering what the best way is to make the user understand that you can select multiple items in the drop down.

Currently, when you make just one selection, the drop down closes (as the majority of time, I imagine one selection is enough). But perhaps if it didn't close, the user might either think there is something wrong with the drop down, or will realize you can make multiple selections.

So I want to make a great UX, whilst letting users know they can make multiple selections.

My ideas were:

1. Put some text stating that multiple selections are allowed

2. Make the options have checkboxes, so it looks like they can be selected multiple.

3. Keep the drop down open when someone makes a selection, rather than automatically close it each time.

Open to any other ideas.

Answer 1

I designed a couple of multiselect dropdowns for a client who has a lot of them with a huge amount of possibilities to select from. There are multiple ways of making clear the user can choose various options. What I usually do is when the user hits the input field, the dropdown pops up and stays open for the user to choose from the list. When the user is finished she clicks on the input field again to close the dropdown selection box. In the dropdown I use checkboxes to make it clear the user can select many. These selections appear in the inputfield. When besides that, you would have that many options and you have an opportunity to combine them in groups that are logical, you can also use extra multiple select inputfields within the dropdown, like so:

Other options for dropdowns are:

Hope this helps!

Answer 2

Multiple selection needs to be coded in so that it's possible. How developers [unless that's you] do that may influence your design/placement approach.

EG, in the page here, it is fairly intuitive once any item is selected, it appears along the top. Or if coded to feature check boxes in the drop down, that's also intuitive once ONE checkbox is added to the drop down. And, a short instruction-indication could be placed above or next to the arrow which indicates the drop down, noting multiple selection are possible, and potentially that clicking outside the box will close the drop down. Visitors have a hard time noticing things on pages in general, I think coding an intuitive thing like one of these + adding help text is the best solution.

From: https://semantic-ui.com/modules/dropdown.html

Answer 3

HTML has had a multiple feature for the Select widget for a long time. It is possible to set a value indicating how many items should be visible at a time (i.e. more than the standard 1 (single) default or selected item. Your examples use 1 item, leading to the need to show multiple selections in the single item row, you could alternatively choose to show the entire set of options at the same time, making it very clear to the User what they have and haven't selected. Note that Google refused to implement that on Android (mostly because they didn't want to support vertical scrolling of such a widget within a vertically scrollable window), so using that mechanism won't work if your users are accessing the form via Android browser. It is said to be supported for more recent browsers on Android, though, such as Chrome and Mozilla [1].

Hinting that multiple selection is possible can be as simple as stating "select one or more" as part of the label or hint for the field.

I would suggest not closing the dropdown upon a (single) selection, as that causes a problem for you and the User.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select