Token-field design pattern that has lot of tags selected

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 tokens selected"
  • 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?

Tags: