Create item in list

[ankigupta92]

Hello I am working on a combobox component where user can create a new item. One of the pain points is around creating new items in the list. Currently creation is only available if we are unable to find the list item. Users have mentioned that sometimes they just want to create without having to search everything.

I have created a design for this and wanted to get your thoughts for this interaction (screenshot attached):

• User wants to add a list item called “return”
• While typing we show the option to create “return” or use an existing item called “returned_customer”
  

[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! Based on the Paste documentation sections you've provided, here's how the interaction for creating a new item via a combobox can work:

1. When a user types something that is not part of the dropdown items, the "create" item list appears and auto-populates with the user's input. This directly addresses your scenario where a user wants to add a list item called “return”. As they type “return”, the option to create “return” will appear in the dropdown.

2. When the user selects the "create new" option, the input field updates with the selection. This means if they select to create “return”, the combobox will update to show “return” as the selected value.

3. For a Multi-select combobox, the newly created item shows as a Form Pill. For a Single-select combobox, it shows the new item as a value. This flexibility allows users to either add to a list of items (Multi-select) or choose a single new item (Single-select).

Here's a snippet from the documentation that explains this interaction:

1. When a user types something that is not part of the dropdown items, the "create" item list appears and auto-populates with the user's input.
2. When the user selects the new item, the input field updates with the selection
3. For Multi-select, it shows the new item as a Form Pill.
4. For Singleselect, it shows the new item as a value.

Additionally, there's a Code Sandbox demo provided by the Paste team that showcases this functionality. This demo might not cover every aspect perfectly (e.g., it doesn't close/clear the Combobox on select, and you'll have to add the matching hover/focus state), but it gives a good starting point for implementing this interaction.

For more detailed guidance and to explore the demo, you can visit the Paste documentation: https://paste.twilio.design

Please let me know if there's anything else I can help with!

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:

• Create new item via combobox (updated: 07/17/2024, similarity score: 89%)
• Create new item via combobox - Answer (updated: 07/17/2024, similarity score: 88%)
• Combobox Improvements (updated: 08/10/2022, similarity score: 86%)

[serifluous]

Hey @ankigupta92, yes, this is our recommended interaction! PasteBot is right—See #3983.

It's still in our backlog to get this example up in our doc site, but it is available in Figma right now: