I am about to design a webpage wherein I got confused between few components which suits.

Here, I would like to understand what is the best scenario for choosing between typeahead and dropdown menu as both provide a list of values.

Reference: https://pineconellc.github.io/angular-foundation/

Thanks in advance.


As a general practice searchable Dropdowns are used when there are a lot of Dropdown options or the Options are Categorized. It makes it easier to search and select the Option required.

Whereas simple dropdowns can be used when the options are very few like 3-5.

Another thing to consider is the Context of the user, typeahead in dropdown menus are good if the user knows what he is searching for. Otherwise its as good as a simple dropdown with a scrollbar.

| improve this answer | |

You should use type-ahead when

  1. You know which option you are going to select. For example, you are likely to know product (in an e-commerce site) that you are searching.

  2. Number of items are so huge that a drop-down may end up having a scroll bar.

  3. You also want to show categorization such as example below

Type Ahead results categorization

Otherwise show drop-down, if

  1. Number of items are small (but 4 or more)

  2. Number of items are not static.

Else, if the number of items just 3 or less than it is better to show radio buttons :)

| improve this answer | |

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.