How to deselect a radio button when I select another radio button? (when using variants)

Ask the community
1

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 :frowning: Please help!

2

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.

4

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)

5

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

1 Like
6

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

1 Like
7

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?

8

may it possible now with variables and conditions?

1 Like