Using multiple combobox primitive to populate a separate section with a form pill group

[samarthpuri]

Hi team! So I know we have the simple multiselect combobox example in where the form pill group populates directly underneath. But I was wondering if there were any guides in using multiple combobox primitive in order to populate a separate section with a form pill group?

This is what we're thinking:

[loreina]

Hi @samarthpuri!

It looks like you're wanting a selection in the "Base message" Combobox trigger form pills to populate within the "Template" Textarea. How would the different base, optional, and custom messages show up in the Textarea? Would users be able to add more field text within the Textarea? Would users be able to add field text between form pills?

Could you also share a link to your Figma file? It would be great to hear more about the user flow and use cases for this modal to bring back to the team. Thanks!

[samarthpuri]

Hi @loreina!

We're still in early exploration as you can tell. The Textarea is currently acting as the placeholder for the Template. The Template can only consist of content/text from the base, optional, or custom messages. The base is the only sentence that gets segmented into individual words - multiple form pills, as users tend to cut it down to avoid the message segmentation or if they use their domain (will eventually add domain to the optional list). The optional and custom messages act as complete sentences - one form pill.

In the page "🔄 Service Settings SMS - v1" it goes through the flow showing how a base and optional messages are used to create a Template.

Figma file

[kate-porter]

Hey @samarthpuri, thanks for sharing that additional context! One more question about the flow, if you don't mind:

Can you share more about how you landed on the base + optional + custom message options to generate the template? Do you need to keep the template content pretty locked down, or is there room to give the user more flexibility in writing their own content?

One approach to template creation that comes to mind is what we do in SendGrid, where we teach the user how to use the handlebar syntax, and then leave it up to them to write the email template using that syntax, like so:

The user then writes their email template freeform and can reference these tags as needed. I'm not sure if something like this might work for your flow, but it could simplify some of the interaction patterns if it does.

[kate-porter]

Ah, got it, thanks for the updates! So, it sounds like the user won't have the ability to customize the message inline anymore—instead, they just choose one base message and (if desired) one optional message?

If that's the case, the UI solution can probably be simplified a bit. You could probably just have the Comboboxes for Base and Optional, and then show a preview in plain text rather than using the Pills inside the Textarea.

[samarthpuri]

So a user can select one base, and many or none optional messages. The template doesn't need to start with a base as they can begin with a an optional message if they desire.

Since we're also looking into exploring quick a delete of message (a base or optional), and moving the arrangement of base or optional message, would you still recommend using the plain text or are there any other options?

[serifluous]

Hey @samarthpuri ! You can take a look at a few ideas the design team put together here based on Katie's suggestion: https://www.figma.com/file/SpeLpBoqN2vZv8KWcSn0J1/Paste-Feedback?node-id=1533%3A374820 Option 1 is the recommended one that would give customers a preview of what their end customers might see while also simplifying the UI controls a bit.

Since the customer can't modify any of the Combobox selections, the Comboboxes can themselves be used as a way to allow customers to both select a template and view their selection. Any additional controls you add to allow rearranging/deleting can be paired directly with the Combobox.

Hope this helps!

[loreina]

Hi @samarthpuri, wanted to check in here and see if you've had a chance to look at the Figma file that Sarah shared. Let us know if you have any questions!

[samarthpuri]

Hi @loreina! Thank you to and your team for sharing the Figma file. It was super helpful. No questions on my end :)