Combobox

[amyodea]

Hey Team!

I was wondering if we could consider adding a tick icon to the selected state in the combo-box for the single select, like we have for the multi-select. I understand that the field gets populated with the selected option, but I think we could be more accessible then just using color as the differentiator when the dropdown is open. Any thoughts?

Thank you!

[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.

---

Hey there!

Adding a tick icon to the selected state in the Combobox for single select, similar to what is done for multi-select, is indeed a thoughtful suggestion for enhancing accessibility and visual feedback. While the specific request you're mentioning isn't directly addressed in the documentation provided, we can infer from the Combobox documentation and the approach to customization and enhancements that such a feature could be considered for future updates.

The documentation does highlight the flexibility of the Combobox component, including the ability to use custom option templates. This is demonstrated in the section about using a custom option template in the Combobox, which allows for the inclusion of icons alongside text in the dropdown options. Here's a reference to how icons can be added to Combobox options: Combobox using option template.

Given this flexibility, it seems plausible to consider adding a tick icon to indicate a selected state in a single select Combobox. However, since this specific enhancement isn't mentioned in the provided documentation excerpts, the best course of action would be to file a feature request or feedback through the appropriate channels mentioned in the Paste documentation, such as filing a dependency request or discussing it during office hours with the Paste team.

For now, you might explore customizing the Combobox using the guidance provided in the documentation to achieve a similar effect, or reach out to the Paste team directly for further discussion on this suggestion.

Let me know if you have any further questions. :)

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:

• Icon options for Listbox item? (updated: 10/23/2024, similarity score: 86%)
• Combobox Improvements (updated: 08/10/2022, similarity score: 86%)
• Combobox auto-complete for single select missing drop down caret? (updated: 09/16/2024, similarity score: 85%)

[serifluous]

Hey @amyodea ! Where did you find the Combobox in the image you shared?

If you take a look at the single-select Combobox docs:

1. There's no selected state in the options list for single-select Comboboxes. The selected state for the whole component is mainly indicated through the option showing up in the input box itself.
2. This gets a bit granular, but the state in the options list that shows up when you open it is actually the focus state (not the selected state):

However, the focus state on the doc site does show up with more of a visual difference than the image you shared, so you might want to check with your engineering team on the implementation.

[amyodea]

Hey! Mmm, okay maybe there is a bug in Figma, that screenshot I shared was a the Figma component, maybe I have done something wrong since i'm not seeing that blue bar at the side?

That makes more sense, thanks for explaining Sarah!

[serifluous]

Ahhh yes, this is definitely a bug. We'll remove the selected state in Figma. Thanks for catching this!

You can use "State: Hover/Active" to mimic the open/"selected" state of single-select Combobox.

[serifluous]

Just published an update in Figma for this!