Display/Form Pill Input UI/UX

[HartiganHM]

Hey, all!

We're working on a component that we call a CompositePillInput and need some Paste guidance on how best to arrange the UI. There are a few things that are a must for this component:

• Both "Display" and "Form" (i.e. view/edit) states
• "Display" actions:
  • "Edit" (switches to "Form" state)
• "Form" actions:
  • "Add" pill value
  • "Remove" pill value
  • "Cancel" changes (switches to "Display" state)
  • "Submit" changes (switches to "Display" state)
• The "Form" state input should be hidden when in "Display" mode

I've attached a GIF of the component in action. I also have a WIP Code Sandbox here for reference.

We don't need insight on validation, error states, etc. as we have those cemented in our UI repo, but some of the actions need refining. The main issue right now is that the "Edit" button is in a weird location when the component is in "Display" mode. I've thought of some workarounds, but wanted to reach out here before moving further.

Any thoughts/insight are appreciated!

[gloriliale]

Hi @HartiganHM! We're taking a look at this now!

[gloriliale]

Hi @HartiganHM! We're currently working on multiselect combobox, which would streamline some of the interactions you have here. What's your timeframe for building this?

Here's an option that might solve the question of what to do with the edit button (moving the button to below this field). Take a look and let us know what you think!

[HartiganHM]

Thanks for this @gloriliale! We'll evaluate as a team, but I think the Figma option will likely be our best bet. Thank you so much for putting that together, it's incredibly helpful 🎉

I'm not super positive on the timeline, but we'll start building soon. Unless the multiselect combobox is ready in ~1-2 weeks, we'll likely just use the option Figma option and then replace it later if we think it's necessary.

Thanks again to you and the team for the help! If anything else crops up, we'll reach out 🙂