Join the Webstudio community

Updated 9 months ago

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

At a glance

The community members are discussing the differences between the "Forms > Radio" and "Radix > Radio Group" components. The main points are:

The Radix radio group has a more complex structure with five layers, compared to the two layers of the regular radio button. The Radix radio group also uses an embedded indicator icon instead of the standard HTML radio input.

The community members note that the Radix UI components offer more styling flexibility compared to standard HTML elements. However, the community member had difficulty binding the Radix radio group variable and understanding the "For" attribute used in the settings.

One community member suggests that the Radix radio group can be used in forms and the selected value can be retrieved in the search query, but a name needs to be defined for the radio group.

Overall, the community members conclude that the Radix radio group provides more styling options, but the regular radio button may be simpler to use in some cases.

Useful resources
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