New component request: list of tags from user input

[rexatsegment]

Hi team,

In the Segment app, there are several places where users are allowed to input a list of comma separated items. These are all implemented either by an input field or a mix of components. Some examples:

Input with comma separated text

A more complex example with an input field and pills

It would be nice if there's a compact component where completed items get turned into pills inside the input field. Text input can be turned into a pill when comma key or enter key are pressed. Here's an example I can find online:

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 team,

For implementing a compact component where completed items get turned into pills inside the input field, as described in your examples, you can utilize the Multi-select Combobox component available in Paste. This component allows selections to show up as pills within the input field, which seems to align closely with your requirements. The pills span to the width of the field and will wrap to the next line if more space is needed. Here's a snippet from the documentation that might help:

<Combobox
  items={items}
  labelText="Choose some items"
  helpText="This is the help text"
  optionTemplate={(item) => <div>{item}</div>}
  selectedItemTemplate={(selectedItem) => (
    <div>
      {selectedItem}
      <span aria-hidden="true">✓</span>
    </div>
  )}
/>

For more complex scenarios where you might want to create a custom input that turns text into pills (like after pressing a comma or enter), although there isn't a direct component in Paste for this specific pattern, you can compose one using available components. Based on the guidance provided for a similar use case, you can use a combination of InputBox and InputElement to achieve a similar effect. The pills are not actually inside the input but are siblings to the input, styled to appear as if they are inside. This approach allows for a flexible implementation that can cater to various complex input scenarios.

For more details on the Multi-select Combobox and other components, you can visit the Paste documentation: Multi-select Combobox

Unfortunately, there isn't a direct code snippet provided for exactly replicating the described behavior (text turning into pills on comma or enter press within the input field), but the Multi-select Combobox component and the guidance on composing custom inputs with InputBox and InputElement should serve as a solid starting point for implementing your desired functionality.

Let me know if you have any questions! 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:

• Input Fields : entering multiple items (updated: 08/17/2023, similarity score: 88%)
• Multiple select inputs on form - Answer (updated: 09/21/2022, similarity score: 86%)
• Input Fields : entering multiple items - Answer (updated: 08/17/2023, similarity score: 86%)

[rexatsegment]

We tried multi select combobox. In our use case there's no pre-defined list to select from. And we were not able to make the component add an option and immediately select it.

[roxanagomez]

Our team will take a look at this and get back to you in a bit. Thanks for trying out the bot recommendation!

[roxanagomez]

Hi @rexatsegment after discussing with the team, we encourage you to submit a dependency request for this component variant, we think it might be a good addition to the system.

Also, we're currently working on documenting and polishing a 'create' functionality for combobox, this functionality allows users to create custom labels as options in a Combobox. One of our engineers created this example that roughly shows how the functionality could work for your use case. This still in refinement you can follow its progress in this ticket.

Let me know if there is anything else I can help you with!