Chip with remove feature

[kristijanristic]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Feature request

As a user
I want to (multi) select entities (f.e. a user group) from a list and display them as 'chips', where I can also remove them again (with a 'x' icon within the chip)
so that I can manage those entities effectively.

Use case

As an admin user of Building X,
I want to manage access for certain building hierarchy,
so that I am able to effectively manage access on what user groups have access to what sections of a building.

Please check the frontend prototype

[panch1739]

@kristijanristic We had an initial look at the request with the rest of the DS team (removable badges) and we were wondering a couple of things:

• Do you have other use cases where removable badges would be needed? Or do you need them specifically for this?
• For the selection input, we are assuming that you wanted to use the advanced select with the filter option...as this is the closest component that we have for that. Is this correct?
• After the selection, do you show the badges anywhere else? Or do you want them ONLY for the selection part?
• We have a component called pills input...but this does not allow to have a strict list. This wouldn't work for your case, correct?

If you can provide a bit more info, it would be great :) Thanks!

[kristijanristic]

@panch1739 Let me answer the questions:

• I saw in Security Manager a couple of implementations, where they used the advanced select and also one place in the application where they developed the exact same UI pattern (last screenshot) I am proposing here (assuming that they were not satisfied with the advanced select). I don't know if the pills input could be combined with the advanced select so that at least the readability is better.

I have asked all the other Designers within Building X to get an idea if this UI pattern is something they would use or if some development teams have already done something similar as in the last screenshot shown bellow. [REMOVED SCREENSHOTS FOR PRIVACY REASONS]

• Correct.
• That's the main difference. I want the selected entities to be displayed beneath the input field, instead within it.
• Correct. That wouldn't work since I need to show a list of entities and be able to multi select them.

[panch1739]

@kristijanristic thank you for the replies, it helps us to understand better. We will analyze this ;)