3

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

Design: enter image description here

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?

enter image description here

2 Answers 2

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:

Polaris design system example

3
  • Hey Stacy, thanks for the reply. How to go about it if there are more than 20+ items are selected? Also how shopify handles the default state of it? In default state, user should see the data entered upfront.
    – Swapna
    Commented Apr 26, 2020 at 18:12
  • It might be a lot of labor for a user to select 20 items from a picklist in any case. If you think that will happen, perhaps you might look at organizing your items into groups or use faceting after the primary search term is fired (checkboxes to narrow down).
    – Izquierdo
    Commented Apr 26, 2020 at 19:55
  • Thanks for your time Stacy. I appreciate that.
    – Swapna
    Commented Apr 27, 2020 at 5:30
0

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.

enter image description here

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.