Radio Group Default Value

[AeroFiTech]

Hi there, just came across Headless UI after working with Tailwind CSS.

Just wondering if the Radio Group element has a Default Value tag which I can pass in the props on page load? I have tried both defaultChecked and defaultValue in RadioGroup tag with no avail yet.

I saw the availability of defaultIndex option for Tab.Group but have search throughout and could not find such option for RadioGroup element.

Hope someone can assist in the right direction.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

The RadioGroup is a controlled component, so you should be able to use the value directly, will that solve your problem?

The Tab.Group has a defaultIndex because we started this component as an uncontrolled component. Now you can also make it controlled. Both version of the RadioGroup are currently not available.

[AeroFiTech]

Hi @RobinMalfait Thanks much for the ultra quick response! Appreciate it.

Alright will try it with the option to see if it works. ;)

[AeroFiTech]

One more question - Any idea if we can capture the value of the selected Radio Option for the event? i.e. I have an Option A and Option B. When a user selects Option B would like to return the Option B selection to a helper function.

[AeroFiTech]

Sorry, I found the answer if someone happen to stumble upon this :
<RadioGroup value={selected} onChange={(e) => {handleBlockClick(e)}} :)

[the-glima]

This is just getting the value, doesn't get the event.