How To Create Radio Button On Figma

Step by step guide on how to create radio button from scratch using Figma.

[alphaly]

Hi there,
You dragged Option A down from Assets and copied and pasted it 3 times. Then you applied the Auto layout property to the selection and went to the right panel to pick A, B, C, and D from a drop down menu. My question is how did you get that drop down menu. I followed step by step and I still don't have that drop down menu.
Thanks

[ofredbircham]

Excellent!! This is just what I needed, thank you for sharing. A little tricky but works great once I understood the logic.
Now I just have to connect the buttons depending on the option that is selected.

[jameskale]

Hello Mate,
I guess you skipped some part in the video because at 7:20, you can see only two states while we see a list of the variants created by copying the multiple elements.

[bhagag]

The video Product Meow is very helpful. It is clear that there are a few steps missing in this video. Here is what you need to do... Select the components (Option A & Select state) and create a value like A, B, C, D for the name property. You can create a name property by clicking on the Name drop-down.

[guidoa]

Hello! Excellent creation, thank you very much for the video. See, once the radio button has been developed, what and how do I incorporate it into my wireframe? I can't implement it. Greetings from Buenos Aires

[FlaviaThais-yg]

thank u!! i was trying in a modal and didn't work but when i changed to ''open overlay'' or ''swap overlay'' worked just fine

[Sumee]

Thank you so much brother. You saved my life. I spent 2 days to figure out how to prototype the radio button and failed. I watched your video for 10 mins and I already built my radio buttons. Thanks a ton.

However I am running into a problem. Let's say Flow 1 takes me from chapter 1 to 2 and Flow 2 enables me to choose the correct option on a quiz. Can we merge these two flows? Like a nested flow.

[BanuNefes]

Thank you <3 Your Tutorial worked with me.

[himanshubokil]

Thank you so much bro. Your explanation is very good. It works.

[JM-kqtx]

for some reason it's only letting me choose option A. I made it with two options instead of four bur I followed your exact steps

[mustafatahir]

I've run into a problem. When they're not placed in a frame they work great but when I want to use them in a frame and then I press the button they navigate to the original frame created in the beginning.

[scrambledID]

Super elegant solution. There has to be something I'm not seeing though. I've followed these steps exactly repeatedly (I even tried copying from your layers panel) and I'm still getting invalid variants and glitchy prototypes. Any way to share a file? 😅🙏🙏🙏

[lz]

This video was extremely helpful however, I ran into an issue at the end. My flow works in the prototype however, in my assets, when I go to place this into my design - the asset component only shows the first, option a. So, when I drag the asset into my design it only shows asset a.

[soheilamohamadzadeh]

hi, I did the all steps, but It's going to collect in the left corner of the frame when I click on the radio buttons. what should I do?

[Roosterhoot]

Could not get this to work. there is a certain part that is skipped over in assigning the properties and I think I figured it out, however, when I try to set up the prototype part, it will not allow my to navigate from the circle to a frame of components

[hanacopakova]

I donť understand the name state, it is ok, but my solution can change the btn only once and then not. The name doesn't give me option to select A/B/C/D so it is for nothing, i dont understand why :D

[catfamluna]

How can I make this option not to overlay the whole page when I am playing it?