For a B2B web app we are designing, we have a select box with a dropdown to select values from which are essentially tags. A user can select from an existing list of tags but they can not create a custom tag. Tags are added by a different user and are not too frequently updated. There is no upper limit on the total number of tags this dropdown can have but there is a lower limit of at least 1 tag to select from.

There are two design patterns which we are trying to explore, but we are not able to figure out which one to use/which one would be better for our users in both, short and long-term. We expect our users to interact with this UI component at least a few times a week.

Pattern 1) We show a drop-down with a placeholder text, ‘Select From Tags Below’ > On click of this field, we show the drop-down with all the available tags to choose from. We will add a Search provision inside the dropdown to allow the user search for a particular tag in the list:

enter image description here

Pattern 2) We show a searchable input field with a placeholder text ‘Type to Search or Select Tags’ > On click of this field, we show the drop-down with tags in alphabetical order > As user types the tags name, we show the tag in the dropdown list > User selects the value > Types the next tag value or scrolls through the dropdown to find and select the tags he would like to add.

enter image description here

This can be useful if the user knows the names of the tags he wants to add. But at the same time, is mostly used - in other apps we researched - where the user can add a value as per his/her will (custom tags/values), which we do not have.

Question: Which interaction pattern would be better in your opinion/experience and why?


if I were to decide between the two options, I would gravitate towards the second with few modifications.

  1. Have a regular drop down without search (similar to the first pattern)
  2. onclick -> dropdown the tags and transform the button to a searchable tags.(like second pattern)
  3. if no tags are found -> display a message saying no tags are found and indicate somehow that the user cannot create tags, if possible suggest related tags.

Hope this helps :)

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.