Icons on form pills used in multiselect combobox

[apombo-ux]

Hello! I'm working on a design that includes a combobox where some of the items have a status associated with them that shows up when they're selected from the listbox. I'd like to also show an indication of that status when they're selected, and I can do that in Figma with the built-in component controls (see attached image of the mockup), but it seems like in code it's not possible to control the individual form pills in a combobox. So I wanted to get your input-- is this is an intentional limitation, or something that could be modified in the component so we wouldn't have to break it (which we're always very reluctant to do, and probably wouldn't in this case but would just have to drop the indicator entirely)?

Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi there!

For your design that includes a combobox with items that have an associated status showing up when selected, it sounds like you're looking to customize the appearance of selected items within the combobox, particularly when they're represented as form pills.

Based on the information provided in the documentation sections, there's an indication that customization within the combobox component, especially regarding the visual representation of selected items (like adding status indicators to form pills), isn't directly supported out-of-the-box in the current implementation of the Paste design system's combobox component. The documentation mentions the development of a Multi-select Combobox and discusses its design and functionality but does not explicitly cover the scenario of adding custom indicators or modifying the appearance of selected items within the combobox beyond what is provided by default.

However, the documentation does mention the possibility of using the Truncate component to manage the display of text within the pills, suggesting there is some level of consideration for managing how content within the pills is displayed. This doesn't directly address your need for status indicators but indicates there's some flexibility in managing content display within the component.

Given the absence of explicit support for customizing the appearance of selected items in the combobox to include status indicators, and without direct guidance in the documentation on modifying the component for such use cases, it seems this might be an intentional limitation to maintain consistency and accessibility across the design system.

For a definitive answer or to explore potential workarounds that align with the Paste design system, I recommend reaching out directly to the Paste design system team. They might offer insights into upcoming features that could meet your needs or suggest best practices for achieving your design goals without compromising the integrity of the component or the overall design system.

Let me know if you have any more questions or if there's anything else I can help with! Thanks!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Multiple select inputs on form - Answer (updated: 09/21/2022, similarity score: 87%)
• Display/Form Pill Input UI/UX - Answer (updated: 06/22/2022, similarity score: 87%)
• Required feedback on an unofficial component as a temporary solution - Answer (updated: 10/11/2022, similarity score: 87%)

[krisantrobus]

Hi @apombo-ux this is something we do not currently support. The reason you were able to do this in Figma is due to the error state on the component. When MultiselectCombobox has an error we show the warning icon next to the pills. We have an example in our docs page here.

Can you provide more information with the status values of the options? We have a itemToString function on our components that will allow you to edit text values so you could concatenate the values of you object such as "[name] - [status]"

[apombo-ux]

Dang, well, thanks for confirming that. It'd definitely be nice if the .Form Pill prefix option was actually available when the pills are used inside a combobox, and I've moved this discussion into the Ideas category since that's really the core of this post.

For this use case, the only icon we'd use is the warning one. It has to to do with the source for the values that show up in the enumerated list-- they're friendly names that need to be associated with a data source, and if one of the labels/friendly names is missing source data we flag it. Inside the listbox there's an orange warning badge next to those items, with the warning icon and text. We did consider modifying the pill label itself to show the warning message, but since it would just be plain text it wouldn't make the pill very visually distinct (and would differ from how we're handling similar warnings on single-select fields).

[serifluous]

Thanks for the suggestion! Just added it to our backlog for us to look into potential component API changes.