[BUG] - RadioGroup doesn't work with RHF

[UltraWelfare]

HeroUI Version

2.7.2

Describe the bug

When using a RadioGroup with Radio components, toggling to other radio options sets the value on the RHF form to null

Your Example Website or App

Code Sandbox

Steps to Reproduce the Bug or Issue

type Input = {
  type: string,
};

export default function IndexPage() {
  const { register, watch } = useForm<Input>();

  const values = watch();

  console.log(values);

  return (
    <DefaultLayout>
      <Form>
        <RadioGroup label="Type" {...register("type")}>
          <Radio value="customer">Customer</Radio>
          <Radio value="employee">Employee</Radio>
        </RadioGroup>
      </Form>
    </DefaultLayout>
  );
}

Toggling to customer, will console.log { type: "customer" } but toggling to employee will console.log { type: null }

Expected behavior

The value should be set instead of null

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-2148 [BUG] - RadioGroup doesn't work with RHF

[UltraWelfare]

Wrapping it in a Controller fixes it as a workaround

<Controller
  control={control}
  name={"type"}
  render={({ field: { onChange, onBlur, value } }) => (
    <RadioGroup
      label="Type"
      value={value}
      onBlur={onBlur}
      onChange={onChange}
    >
      <Radio value="customer">Customer</Radio>
      <Radio value="employee">Employee</Radio>
    </RadioGroup>
  )}
/>

[wingkwong]

which RHF version are you using? To speed up the process, you may share a sandbox instead so that we could look into it faster.

[UltraWelfare]

which RHF version are you using? To speed up the process, you may share a sandbox instead so that we could look into it faster.

The latest one 7.54.2. I edited my initial post to include the sandbox

[ariansj01]

I'd like to work on this issue and submit a fix for the RHF integration problem. Could you please assign this to me? @wingkwong @UltraWelfare

[ariansj01]

Hi! I’ve opened PR #5821 to address this issue.

• Problem: Using RHF register("type") directly on RadioGroup could set the value to null when toggling.
• Fix: When onChange is provided on RadioGroup, emit a form-like event { target: { name, value } } alongside onValueChange(value) so RHF receives correct updates.
• Compatibility: No breaking changes; the controlled API (value/onValueChange) remains unchanged.

Thanks!