Join the Webstudio community

Updated 8 months ago

The Difference Between "Forms > Radio" And "Radix > Radio Group"

At a glance
What is the difference between "Forms > Radio" vs. "Radix > Radio Group"?

https://media.discordapp.net/attachments/955905231227609158/1237403080937570324/Radio_vs_Radix_Radio.jpg?ex=663b84ec&is=663a336c&hm=5c8b2b2265e993f96f964aff9bedd754afe1599874a0a80a062140dea662a2f3&=&format=webp&width=1440&height=570

The screenshot above shows that the regular radio has two layers (radio button + text input), while the radix radio group needs five layers to do the same. Also, the Radix radio group uses an embedded indicator icon instead of the regular HTML radio input. Is there a benefit to using the Radix radio group?

https://media.discordapp.net/attachments/955905231227609158/1237403081243627560/Radix_Radio_Binding.jpg?ex=663b84ec&is=663a336c&hm=3f4635bf679eb14252e3a8b16911f5eac76ec7cfd06aac0b1c1d32b5cc02f0f4&=&format=webp&width=1440&height=589

To test, I tried binding the radix radio group variable by doing a system search, but I kept getting "undefined." How exactly do I search for the radix radio group variable to show the selected result? I had no problem with the regular radio button.

https://media.discordapp.net/attachments/955905231227609158/1237403080656420864/Radio_Field_For.jpg?ex=663b84ec&is=663a336c&hm=a5cbfb95201d988966c07ed93dc40cd4c5b0f463234586de2190b86a2bac9791&=&format=webp&width=1440&height=444

Lastly, under settings, what is the "For" used for? That appears when selecting the "Radio Field" layer or the Radix label.
Attachments
Radio_Field_For.jpg
Radio_vs_Radix_Radio.jpg
Radix_Radio_Binding.jpg
O
L
7 comments
Radix UI components can be styled in very flexible ways, standard HTML elements can't.
I have just tested submitting radio group in a form and got value in search query
Attachment
image.png
radio group needs a name defined ofcourse
See I called it test there
Thanks for the reply, Oleg. So, it does the same thing, but Radix gives me more styling flexibility. That's good to know.
Add a reply
Sign up and join the conversation on Discord