We choose the "token-field design pattern" by using react select in all <select> items on our app.

part of them should have a lot of options selected and we start to see a lot of items that look like this:

enter image description here

We are debating between several options:

  • After more than 2 or 3 items were selected - the token will be removed and will be text "x more selected" something like this: enter image description here
  • Inner scroll of all select items
  • Something clever that we didn't think about it yet...

What will be the right UI in this case?

| improve this question | | | | |
  • Hi Erez, could you please answer if all selectors in your app have the same or different importance? You are asking for a UI solution, but this depends on the content you show and on value it brings to the user. In my understanding, you have to decide what is more important: to show all the selected tokens or to keep the view clean and minimalistic. – Anton T Jul 11 '18 at 13:08
  • Why is that a problem to begin with? More context would be helpful. – Andy Jul 16 '18 at 5:59

Generally I've only ever seen this type of UI displayed in full because it is in the users benefit to see them all. You see this alot in search UI, users are filtering and customising a search to drill down results to get what they want quicker. So I would say keep it as it is.

But here are the options I know of to explore:

  • Leave it as it is, it shows the user what they have selected clearly, if a user is personalising/filtering something with these tags they are more inclined to be alot more forgiving, even if it gets excessively long. Its easier for them to see their selections.
  • Show the top 3-4 selections then have a show more type reveal to show them all. Similar to the Skills section on a LinkedIn profile displayed on mobile.
  • As you say, an inner scroll.

  • Have them horizontally scroll across. (See below)

enter image description here

  • Alternatively have them as a selection. Foursquare have this issue and leave them all showing because it is in the users benefit to do so. (See below) (See Below for examples)

enter image description here

| 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.