I’m in Figma creating a variant component for a radio-button that asks a user to choose only 1 type of fruit between “Apple”, “Banana” or “Orange”.
I want to make the component interactive in a way that an item gets deselected when another item gets selected (which is how Radio buttons work). My problem is that when I prototype it users click on all items and they all get selected 😦 Please help!
You’ll probably have to make the radio button group (so all three choices listed together) itself a variant, with a version of each selected.
I see. So there isn’t a neater way to do it? I was trying to avoid creating 12 versions of same thing in my design system. (I have 12 radio item and they can easily go to 20)
Unfortunately no neater way that I’m aware of (at least not without significant hackiness … if you want to see that solution, LMK). I would encourage you to vote on this feature request that might address this use case. Prototyping | Conditional logic & variables
FYI, I published my “protohack” for an alt way to do radio button groups without variants: Advanced Figma Protohacking. Episode 1: Radio Button Groups | by Nelson Taruc | Sep, 2022 | Medium
This is very interesting and look very organized. I’ll read it again in details. Have you thought of making a tutorial video of it?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
