Idea that I have for multi optionI am creating a web application that requires a user to select from 400+ options. This is absolutely mandatory as it is for B2B software.

I want to break it up into categories. However, there may be close to 30 categories with 25-50 options in each category. This creates a long drop-down but cuts down on the number of options available to the user.

I am looking for advice, critique or possible examples of how others have handled this sort of issue.

  • What is the goal of the user? What is the user trying to accomplish? Dec 19, 2017 at 10:34
  • You could also put little "x" buttons next to options already selected in the Options Output window so that the user won't need to go back to the applicable category to deselect an option. Feb 22, 2018 at 19:05

5 Answers 5


Handling potentially hundreds of inputs is never simple: you should try to let users' make choice in a simple and safe way, depending on the domain specific issues.

A very common solution to display grouped sets of checkboxes is a collapsable tree: you can display the complete lest of options' categories and let users expand and collapse groups of options.

Your checkboxes should be able to handle 3 states:

  • checkbox not selected
  • checkbox selected
  • checkbox "partially selected" (that should be associated to categories which contains one or more selected options)

UI Tree demo 1 enter image description here

(source: https://www.jqwidgets.com/jquery-tree-with-checkboxes/ , https://zedt.eu/tech/windows/installing-an-ipp-printer-in-windows-10/)


How about a UI similar to a file browser?

Here is an example: http://elliottregan.com/experiments/arise-testing/tmp/education-center.html

Allow users who know exactly what they are looking for to search, but also display categories in a two-column layout. Using a two-column layout over a select dropdown allow users to scan all the categories and quickly click on them to see if each category contains the information they are looking for.

Fewer clicks than a dropdown.

  • Thanks for the feedback. I think a search may be helpful. However, these options are endpoints from an API so they need to be selected opposed to inputs. This flow will be low frequency but is part of the set up for a CMS. Users need to select 10-50 of these options to configure. How does the example you provided save more clicks than a dropdown? Oct 25, 2017 at 0:31
  • The dropdown select requires one click to view the list of categories, and a second click to choose the option. A 2-column layout would always show the list in the left column, eliminating one click. Oct 26, 2017 at 14:26

Maybe rethink if you should have everything visible off the bat. One alternative UX is a search field with tags, like you have in Stack Exchange. In SE you can choose from way more than 400 options. You can use a placeholder in the search field with some examples of tags/options.

enter image description here


Options can further categorised into multiple categories. Check the attached screenshot depicting categories(fashion, groceries, electronics ..) in a drop down. Fashion category is further categorised into men's, women's, kid's etc and again into formals, casuals, party, night dress etc.

Category specific search function can be added to make more usable for user.

Selected options can be represented the same way you have done.

FYI, thumb rule of dropdown: there should not be more than 10 categories, if there are more, add search.

enter image description here


I would use a collapsable tree, but I would modify it a bit. Allow the user to select only one section at a time, after he clicks on the next section, the previous one will be hidden. The hidden section will show brief information (for example, how many options are selected or short names of the options, it all depends on your needs).

enter image description here

Another option is to try using a stepper. Give the user the option to select options for each step. But you need to add quick navigation between sections, as the classic stepper is not designed for 30-40 sections.

enter image description here

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.