Radio Group with actionable sub options

[jkiga]

Hi there!

I am working on a piece of the A2P wizard where the user chooses what Messaging Service they want to connect to their campaign. They have two options of choosing an existing Messaging Service or creating a new one.

Due to conversations with engineering, I have strayed away from the combobox as it is predicted to have high performance issues and limitations with pagination working with multiple Messaging Services.

I have explored a pattern that I would love feedback on. This might be a three part feedback/discussion:

• I am wondering if there is an existing pattern/best practices for radio groups with sub options that aren't radio buttons.
• Interested in feedback for this button/read only input combination that invokes a modal to select an existing Messaging Service. Once a Messaging Service is picked, the read only input displays the selection from the modal (I drew inspiration from uploading an image to an avatar pattern)
• I am using a "recommended" badge to indicate to users to use this specific Messaging Service in a flow. I'm wondering if blue is the right color combination or if there is another color that might fit better for this use case.

In short, is how I anticipated how the flow could work:

A little more context:

• If the user picks the "Existing Messaging Service" option, picking a Messaging Service would need to be required and the user cannot move on to the next step of the wizard until one is picked.
• The modal with the list of existing Messaging Services already exists today, I took the existing page and put it in a modal so the experience is all on one page.

If you need more information about how the flow works or wanted to look at explorations, I hope my Figma file can answer any more questions!

Thank you so much!

[TheSisb]

Hi @jkiga,

This certainly is a challenging flow to design for! I talked it over with my team and we think it may be more intuitive to use buttons instead of that first radiogroup. So essentially, under “Connect Messaging Service” you have two buttons — “Connect existing service” and “Create new service” — that each then launch a modal to do one or the other. Then, after completing one of those options, the page would show which service is connected inline under “Connect Messaging Service” with the option to disconnect it and basically start the flow over.

The reason I'm not a fan of the current radiogroup into button into readonly input is because it isn't very intuitive for users and for a11y. I think a two button treatment would be more obvious.

Hope this helps!

[jkiga]

Hi @TheSisb!

Thank you so much for your feedback, I really appreciate it!
I thought about your suggestion of having two buttons under the "Connect Messaging Service" and I think would work well for the "Existing Messaging Service" option, but possibly not so much for the "Create new Messaging Service". Since there is nothing the user needs to fill out for that selection, the button might be the wrong element for that selection. I do see where you are headed, it definitely got me thinking!

I did talk to the Paste team today during their office hours and I'm exploring a solution with radio buttons but also another required readonly input with a button that only displays if the "Existing Messaging Service" option is selected. That button at the end of the input would pop up the modal and determine what displays in the readonly input. The Paste team suggested that this is more accessible and follows our guidelines a little better. I plan to explore this next!

[TheSisb]

Sounds great, thanks for updating the thread with your findings at office hours! Keep us posted if anything else comes up 👍

[gloriliale]

Hi there! Wanted to leave the recording of Office Hours where we discussed this here for reference: Office Hours recording. The password is posted in the #help-design-system channel. Thanks again for coming to office hours!