Visual picker vs radio button group (recommended usage)

[karoltonik]

Hey, we need to prepare a screen migration for segment settings / user role assignment. I've come up with a few options, and we're considering the most appropriate component usage. Which of the following options seems most appropriate, or do you perhaps have other recommended solutions?

1 Active visual picker element triggers internal options.
When the second visual picker element is active, additional clickable elements appear inside.
figma

2 Active visual picker element triggers external options.
When the second visual picker element is active, additional clickable elements appear outside.
figma

3 Using disclosure within the visual picker.
The visual picker itself doesn't trigger additional clickable elements. They are placed inside the disclosure. However, we're aware that this might not align with the accessibility of the disclosure component: "You must not nest focusable or actionable elements inside the DisclosureHeading."
figma

4 Clickable options are always visible.
The visual picker still contains additional clickable elements, but it doesn't trigger their appearance.
figma

5 Using a radio button group instead of a visual picker.
We use radio buttons, and upon selecting the second option, additional action elements appear.
figma

[serifluous]

Hey @karoltonik !

Options 1, 3, and 4 are not doable since form elements can't / shouldn't be embedded into other form elements. Each Visual Picker option is a single UI control, so (for example) a screenreader would read off everything inside each Visual Picker option.

Between options 2 and 5, I'd rely on @ceyerkes expertise here. If a Radio Group works just as well as a Visual Picker, then I'd recommend going with the Radio Group. However, if it feels like the Visual Picker sets a higher level of visual hierarchy over the additional elements, then Visual Picker is perfectly fine here, too.

One thing you could try, too, is keeping all the additional form elements on the page, but have them show up as disabled when "Workspace Owner" is selected. I'm not sure if it's a better solution than what you have, but worth trying out and getting feedback on!