Form Pills inside TextArea for displaying multiple inputs

[diegogguevarab]

We have a requirement from Design team to build a multiple email input where each email is shown inside a pill like this:

I found a previous discussion that's somewhat related but, its over 3 years old. So, I wanted to know if there is new approach to this sort of implementation.
I took a look at the Multiselect combobox implementation but, since the emails are not in any list but rather provided by users, it doesn't seems to be the correct approach.
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 there!

For implementing a multiple email input where each email is shown inside a pill, you can utilize the new Multi-select Combobox component that's available in Figma and will be available in code soon. This design allows the selection to show up as pills within the input field, which seems to align closely with your requirement. 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:

<!-- This is a conceptual example, check the latest Paste documentation for actual implementation -->
<div>
  <label htmlFor="emails">Enter emails:</label>
  <MultiSelectCombobox id="emails">
    <!-- Pills for each selected email would go here -->
  </MultiSelectCombobox>
</div>

Additionally, you could use the Truncate component to manage the display of long email addresses within the pills. This would allow the pills to be truncated at a certain character length, with the full email address appearing on hover. However, it's important to consider the readability and accessibility implications of truncating text.

For more details and to stay updated on the availability of the Multi-select Combobox in code, please refer to the Paste documentation.

Let us know if you have any questions or need further assistance! 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:

• Chip/Pill Input (updated: 07/11/2023, similarity score: 87%)
• Multiple select inputs on form - Answer (updated: 09/21/2022, similarity score: 86%)
• Input Customization Options (updated: 11/15/2024, similarity score: 85%)

[jhanvi1399]

Hi Diego! Thank you for posting this discussion.


We discussed this internally and the answer in this discussion- Chip/Pill Input referred by PasteBot still holds true. Adding to that answer, you would need to use the Input element to remove the wrapper styles so it can go into the container and look seamless.
I hope this helps, feel free to reach out if you have any questions or feedback!