[RadioGroup] Unable to reset value in controlled mode

💁 Note, I originally started a discussion around which where it was suggested that this might be a bug.

Bug report

Current Behavior

When using the RadioGroup in controlled mode, it doesn’t seem possible to reset it (so that none of the items selected) without violating type rules. The component only allows a string or undefined as the value. Passing null seems to correctly reset the radio group, but isn’t an allowed value.

Expected behavior

I’d expect that it’s possible to reset the value of the RadioGroup somehow. Either by passing undefined or allowing null.

Reproducible example

https://codesandbox.io/s/heuristic-brook-x77cul?file=/App.js

Suggested solution

If there are no downsides, it seems that the type here could simply be updated to allow null for the value prop.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-radio-group	1.0.0

[benoitgrelard]

But say I did change it to be within a form element and did a full form reset (something like this I guess). From an accessibility (and UX) standpoint, that doesn’t seem any different than resetting the Radix RadioGroup by allowing null to me. That would also violate the rule stating that:

The state where a radio is not checked only occurs on page load.

Or am I missing something?

Yeah exactly that’s why I asked about the reset form case, because that’s definitely a thing (and something we don’t currently do, which is the issue I linked to).

…and so “resetting” from an external interaction would be fine but i’m not sure how radix could enforce that via controlled api.

Yeah that’s the difficult part with undefined because of the controlled/uncontrolled nature. We detect as “controlled” if there’s a value if the prop is defined. It might be that null is the only way forward. I haven’t looked at the problem yet, but I think it’s a general issue we have with all those form components, given how our useControllableState works and the controlled/uncontrolled detection.

At the very least, I think we need to make sure all form components reset their state when a form reset occurs.

I’ll keep the issue opened then @ckastbjerg, thanks for the further responses.

[jjenzz]

But say I did change it to be within a form element and did a full form reset (something like this I guess).

hmm, yeah that’s an interesting example.

that doesn’t seem any different than resetting the Radix RadioGroup by allowing null to me

in this case i think i agree. perhaps the WAI ARIA docs are trying to express that interacting with the radios themselves should not clear their value and so “resetting” from an external interaction would be fine but i’m not sure how radix could enforce that via controlled api.

perhaps easier to just allow it as i am unable to find any supporting material on why they say radios should only be unchecked on page load.