Make radio group truly uncontrolled

[arodriguezcortes]

Hi Paste team. This is kind of a follow up on this discussion, where I requested to make optional the onChange prop in the RadioGroup component (thanks for that change btw).

In this case my suggestion is that the onChange prop in the RadioGroup and Checkbox components (and maybe others?) get updated to expect the whole event instead of just the value. To do this, in the RadioGroup for example, we need to modify the onChangeHandler to pass the whole event to the onChange function instead of just the event.target.value value (here).

The purpose of this suggestion is to make the type of the onChange prop in RadioGroup the same as the native one, which expects an event as a parameter instead of just the value of the event. Right now I'm trying to use react-hook-form to register a RadioGroup as an uncontrolled component, but I get this error: Types of parameters 'event' and 'value' are incompatible, see image below.

I did a quick research and you are using the same onChangeHandler in the CheckboxGroup component (here), but not in the Input component, where you're actually passing the developer's provided onChange function directly (here). One drawback of this suggestion is that it'll be a breaking change given that handlers already implemented need to be updated to expect the whole event instead of just the value.

Let me know your thoughts on this.

[gloriliale]

Hi @arodriguezcortes! RadioGroup does not have a matching HTML element, and exists mostly to aid in abstracting away certain difficulties. At the Radio level , however, you can pass the component an onChange that will return the native browser event from the radio input as a direct one to one mapping to its native behavior. If you're using uncontrolled RadioGroup, we suggest giving the Radio components the onChange (as opposed to the RadioGroup). Here's an example in our Storybook (and its implementation).

Let us know if that solution works for you!

[arodriguezcortes]

Thanks @gloriliale . You're right. I used individual Radio components instead of RadioGroup and that worked as expected.