Dropdown and multi select



hi all,

we’re working on a dropdown with multi-select and look-up features.
We are forced to display such complex element due to the fact that the amount of values within the dropdown can span from 2 to more than 100.
This is the reason why we introduced, some months ago, the look-up field to allow users filtering values.
We tested the solution and the results were quite reasonable to go live with it.

We received some issues from our customers related to:

  • usability level of the “reset search” fetures
  • usability level of the “all” feature to select/deselect all the items

we collect all the findings and feedback from our customers and we want to design an enhancement for this component::

Would be great having some feedback from you.
We are not 100% sure about the 3 questions I wrote in the sketch, I hope my handwriting is readable :slight_smile:

Web forms - select

Hi, we have had a similar issue with allowing users to search through a huge dropdown. The option we went for was a typehead, I’ve found a similar plugin here https://twitter.github.io/typeahead.js/ but there are loads of different ones around. Ours allows a user to build up a query too by typing in and selecting multiple options and it adds comma’s between the search terms.


hi @jacquidow
our user case is different.
The main task for the user is to select the items she/he needs to work with.
As a user you will work with this component only if you have to work with more than 1 items at the same time.
For some of them is a very easy task due to the fact that they have a short amount of values, for some professional users is a huge task because they have a lot of values. For the second type of users we want to provide some “advanced” features to easily optimize the default query

As you can see in the step#1 we provide

  • the look-up field
  • the default search result with “all items” checked
  • the “All items” check allows users to quick select/deselect all
  • the apply button to execute the query (we cant provide the query as background task due to the fact that is to heavy in terms of system performances)

in your user case the component was capable to provide a multi-selection features, isn’t?


I can’t speak to question 2, but I think that the answer to 3 is yes, the count is self-explanatory.

I think that All Items is fine, although I would probably expect it to say Select All.


hi @HAWK
we are thinking the same about “Select All” instead of “All Items”.
Do u expect the label changes when the check button is flagged (Deselect All)?


I’m not sure I understand this bit?

In our case there could be an option for ‘all’, which could be the default. Or the user can select other options, single or multiple values. There is then a submit button (in our case ‘add’)


hi @jacquidow
thanks for your screenshot!

My user case is slightly different due to the fact that the primary action is not to filter.
The component is built to allow users to select values.
We noticed, afterwards, for some users was not an easy task due to the huge amount of data. We decided to introduce the look-up field. Now we want to simplify as much as we can the main task providing a feature to select/deselect all and in some cases to filter by…

We implemented the first release using this pattern: http://davidstutz.github.io/bootstrap-multiselect/#getting-started


That seems very similar to what we have, only we havent implemented a default option. It seems that they both do the same thing just in slightly different designs!
The bootstrap one seems very easy to use, and with a search function would work very ewll for large sets of data :slight_smile:


I don’t think it’s crucial.


Hey people! New guy here.
Came across this thread/site through google search.

I’m doing a similar multi-select design, and wondering if there would be a way to display the selected items (there would most likely be only 1-5 selections). Or is this even needed in your opinion? I suppose users could simply click on the dropdown to see what they’ve selected after the fact (only 10-15 items).

Looking forward for your opinions!



Hey there! Welcome :slight_smile:

I’m afraid I don’t fully understand your problem, do you have any images you could put up?



Here’s a screen cap. So when a user selects multiple verticals I’d like to display, and just wondering if I should do this, and if so, so ideas on how to do so. Or just leave them in the Dropdown and user can open if they need to review their choices.


Hi. @mattswitch1971 , I would suggest keeping it that way since you can see all the list at once.
In the case stated by the OP I would say using a Dual list system. In the left list you have all the options available and in the right list you have what you already selected.

The dual system alternative is useful when we have large amounts of info, where we’d need a few scrolls to get through all of them (to check manually what we have already selected). So the second list help us to know exactly what we have already selected, at once.


Thanks for the suggestion, yeah I will leave as-is


Here’s another question, do you move your selected items to the top of the list or do you keep them in their place when they get selected?


It depends on the context – can you explain your situation and maybe include a screen shot?

I’d tend to say leave them where they are.


I agree. I usually don’t like it when content on the page moves. Once my mind has located something on the page, I would expect it to always be there in that same location.

The developer made it so that once you select an option, the option moves to the top of the list. I was on the fence about that but looks like it’s better to keep the options in the same order.