How to show multiple chips in an input field?

Question

I have an input field where the user can select multiple items. Currently, I am using chips to capture user input.

Design:

Problem

1. How to show N no of chips e.g 10 number of chips in this example?
2. User should be able to see all the selected chips

Constraint

1. The known solution to this problem is keeping expanding the input field. I do have a constraint not to expand the line. The input box height shouldn't be increased at any cost.

The interaction I thought of is adding a click + drag interaction in the input field which is certainly not intuitive.

What is the best way to solve this problem?

Answer 1

If the input box can't be expanded, one solution would be to place the chips underneath the filter. Here's an example from the Polaris design system:

Answer 2

I just stumbled over an article that presents a useful and usable solutions approach to your design problem, Swapna: check out section "4. Consider overflow scenarios and have designs ready for them," in this article by VMware Design.

Displaying an indicator that there are more items in the field than appear in its viewport, and providing some kind of hover panel/tooltip with those items, might work in your design context, as well.

(Note how the image caption says that each of these fields supports up to 32 labels, which is quite a lot.)

Good luck!