I think I’m getting some bugginess due to the way I’m having to build the interactivity for a group of Radio Buttons. Curious if anyone has any experience with a similar setup or ideas on how to fix.
My individual radio buttons have variants for:
State (enabled, disabled, hover/focus)
Status (selected or unselected)
Help text (true/false, though when false, it’s still a part of the component, just a hidden layer)
Size (we have two sizes for desktop and mobile)
I’ve nested the hover state within the individual button + label + help text component. For the group component, I’ve had to create variants like everyone typically does to only have 1 selected at a time.
My issue is that the Help Text content is not being retained when that button gets selected. The only solution I’ve been able to come up with that works is to create a massive number of variants for all possible combinations of which in this group of 5 would have Help Text shown. However, that’s a ridiculous amount of variants to maintain and seems unnecessary. Hoping that there’s another solution!
Attaching screen recording of the prototype bugginess + screenshots of the component build and prototype spaghetti.
Sure, here’s a scrubbed/minimized file for privacy purposes: Figma
I had originally built the interactivity within the individual radio buttons and one group with the individual radio buttons swapping within, but the issue is that they’ll act like checkboxes. You could select all of them at any point which doesn’t reflect the way a radio button group can only have one selected at a time. We’re trying to build this interactivity as realistically as possible within the components so our designers don’t have to built out every radio button group interactivity themselves.
It seems that Figma doesn’t always carry over properties of a Variant’s nested children when changing the parent’s properties:
If the change affects the child directly (for example here, if the help text is visible under the button that swaps from checked to unchecked), the children will be reset to default.
If the change doesn’t affect the child (e.g. a help text applied to a radio that doesn’t change state), the override will carry over.
I opened a thread a while ago on this subject. I just realized it wasn’t a feature request until now, and made it into one.
