So I have a check list in a form that becomes populated with choices based on some data attached to the user accessing that page. It will have around around 50 values in most cases, but can be as little as one or two. Furthermore, if an Admin account navigates to the page there will be hundreds of values.

The only real criteria for this input is that it can handle multi-select and select/deselect all.

My original plan was to do a small scrollable box with the fields, but this could be unintuitive if there are 300 options to choose from. I was also looking into Bootstrap-Select with its select/deselect options, but I can't quite get it to work on my asp.net MVC application.

Any recommendations on how to handle this list?

  • Can the check list be broken up and organised into logical groups or categories in the form? – SteveD Aug 1 '16 at 15:52
  • Not really, there is no inherent grouping of the values, therefore it is not needed. The list is composed of customers that are available to the user based on the company their account is registered under. – Probably Aug 1 '16 at 15:54
  • So the user is just selecting one or more Companies from a list of Companies that are of interest to them? – SteveD Aug 1 '16 at 15:59
  • @Splatz Correct. – Probably Aug 1 '16 at 16:01

The is a really obvious grouping - the Companies have names so you can group by the first letter of the Company name. This should ensure that the list of choices is always low (for example you will not have 300 companies beginning with the letter A). The Alphabet "Rolodex" is being used as a filter and you only need to display the letters of the alphabet which relate to the data set, e.g. you don't need all 26 letters of the alphabet as filters, e.g. if you only had company names starting with letters A, B, C, and D then you would only see the letter A B C D in the "Rolodex".

enter image description here

You can optionally maintain a second list which only contains the companies as you select them across the "Rolodex", but only if it is important for the user to see all the choices they made in one single place. Here you can see a second list is being generated as you check the companies.

enter image description here

In this example you would need a way to remove companies from this second list.

  • When the user knows what to look for then you can just have a searchbox – BlueWizard Aug 2 '16 at 5:33

My primary concern from your use case is the challenge of users to manage large list of selections. Possible option is to mimic the behaviour of a table or use a table selection.

You can either dynamically show/hide the list or use tabs depending on your preference.

large list selection

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.