Create new item via combobox

[charleneyjh1]

Hello Paste team!

I notice there's a "create" variant for the list item in combobox in Figma library, but i'm not sure what the interaction would look like, and I'm not able to find an example on the Paste doc..

When user clicks on "create new" list item, does the combobox become an input field that user can directly type?
Once user type in the new value, can they still open the dropdown and switch to an existing list item?

Appreciate your help!

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

For implementing a "create" variant within a combobox, you can indeed customize the options in a combobox to include a "create" option. When you're at the build stage, here's how you can achieve this interaction:

1. Add a “create” option at the end of the items array.
2. Use the option template to render the “create” based on the item.
3. Utilize the state of the input value to append what you’ve typed to the "create" option.

This approach allows users to select from existing options or create a new one. The combobox remains an input field where users can type directly. After typing a new value, users can still open the dropdown to switch to an existing list item if they choose to.

Here's a snippet from the documentation that outlines this process:

// Example of adding a "create" option at the end of the items array
const items = [...yourExistingItems, 'Create new item'];

// Example of using the option template to render the "create" option
<OptionTemplate>
  {item === 'Create new item' ? (
    <CustomCreateOption />
  ) : (
    <DefaultOption item={item} />
  )}
</OptionTemplate>

For more detailed guidance and to adapt this to your specific needs, you might want to check the Combobox documentation and the update regarding the combobox component that allows for customizable options, including a "create" variant.

I hope this helps! If you have any more questions or need further assistance, feel free to ask.

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:

• Combobox vs. Button (updated: 09/13/2023, similarity score: 89%)
• Menu item descriptions - Answer (updated: 08/19/2022, similarity score: 87%)
• Adopt Paste component in MC product (updated: 05/30/2023, similarity score: 87%)

[roxanagomez]

Hi @charleneyjh1 Sure here is a clarification of how this interaction works:

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.

Also you can check this Code Sandbox demo created by our engineers. This was a time-boxed task so it gets the functionality most of the way there: It doesn't close/clear the Combobox on select, and you'll have to add the matching hover/focus state.

We're working on ways to have a better documentation for this. Please let us know if you need help with anything else.

[charleneyjh1]

thank you, that clarifies a lot!

[charleneyjh1]

Well.. the way I use it is different from the default usage pattern

I'm using it in the single combobox component. This is part of the warehouse connection setup flow, where user can choose from using an existing warehouse credentials or create new credentials.

I'd like to include "+ create new" as one of the item in the dropdown. If user choose that, the page will render a butch of input fields for them to enter the new credentials.

Does the Paste team have any concerns with this usage?
Do we have a UX pattern for choose from create new vs select from existing?

Your help is much appreciated!

[roxanagomez]

Hi @charleneyjh1

Does the Paste team have any concerns with this usage?

From what you're presenting on your screens, it seems like "create new item" is just another option that, when selected, updates the form below it. Is that correct? If so, then there doesn't appear to be any issues with how you're using it. The action the user is performing is selecting a single value from a list of options, which is precisely what a single combobox is intended to do.

Also, just to make sure that users can always access the "create new item" feature I would suggest to place it at the top of the list, or having it outside the combobox as a button.

Do we have a UX pattern for choose from create new vs select from existing?

The only pattern that we have currently associated to this is the one I explained in my original reply.

Let me know if there is anything else we can help you with.