Combobox (Unique Value): Feedback for unique values

[benjamin-kurien]

The Problem and Solution description: We now have a way of adding a unique value in the combobox component. However, this is confusing because no feedback is provided to the user while entering/inputting a unique value, and it lacks visual cues that such an action is possible. This can be resolved by providing instruction to the user that they can add unique values by pressing enter and having visual feedback that the unique value has been accepted and stored after pressing enter.

The need

Adding custom values to a list of options in a dropdown provides flexibility to products to leverage such info in user journeys.

The problem

However adding custom values to a combobox is confusing because it lacks visual cues that such an action is even possible. Moreover no feedback is provided to the user while they try to enter custom values, nor after they input the custom value.

The solution

This can be solved by catering to the user needs, by providing the following visual cues and feedback to the user:

• Instruction to the user that they can add custom values by pressing enter.
• Visual feedback that the custom value has been accepted and stored after pressing enter.

---

Ref example:
https://vaadin.com/docs/latest/components/combo-box

Tasks

Preview Give feedback

1. [Feature Request]: ComboBox offers no suitable affordance to indicate values entered by typing will not be accepted #16498
   component: combobox role: design ✏️ status: blocked 🙅‍♀️ +3
2. Combobox (Unique Value): Research and ideation #16307
   adopter: product component: combobox proposal: accepted role: design ✏️ type: enhancement 💡 +5
3. Combobox (Unique Value): Design & accessibility review #16313
   adopter: product component: combobox proposal: accepted role: design ✏️ type: enhancement 💡 +5
4. Combobox (Unique Value): Final design spec #16310
   adopter: product component: combobox proposal: accepted role: design ✏️ type: enhancement 💡 +5
5. Combobox (Unique Value): Usage & Accessibility tab documentation carbon-website#4090
   adopter: Product proposal: accepted role: design ✏️ type: docs 📖 type: enhancement 💡 +5
6. Combobox (Unique Value): Style tab documentation carbon-website#4091
   adopter: PAL proposal: accepted role: design ✏️ type: docs 📖 type: enhancement 💡 +5
7. Combobox (Unique Value): Figma Kit carbon-design-kit#831
   adopter: Product component: combobox kit: figma role: design ✏️ type: enhancement 💡 +5
8. Combobox (Unique Value): Dev implementation #16312
   adopter: product component: combobox proposal: accepted role: dev 🤖 status: needs design spec type: enhancement 💡 +6

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[benjamin-kurien]

@RheaM29 - Thankyou for highlighting the need for this feature enhancement within your product.

[RheaM29]

@RheaM29 - Thankyou for highlighting the need for this feature enhancement within your product.

Thank you @benjamin-kurien for taking this issue ahead! Really appreciate the initiative :)

[sstrubberg]

Follow on visual enhancement to #6102