[Radio group] Better control of input element

[randallmlough]

IMO it should be possible to have more control of the hidden input element. Per your documentation by adding in a name field in the group a hidden input field is created; which works, but that doesn't serve a lot of value when you need to reference the state of that input.

For example, if you trying to use something like react hook forms you need to pass their register function to your controlled component, but that's not doable atm for RadioGroups.

Possible solution ideas:

• It would be nice that any props passed to the RadioGroup component get passed along to the hidden input element

<RadioGroup
   value={foo}
   onChange={setFoo}
   className="mt-2"
   name="foobar"
   {...register("foobar")}
 >

• (preferred) create a separate Input sub component that we can control to achieve the above result

<RadioGroup
   onChange={setFoo}
   className="mt-2"
 >
<RadioGroup.Input
   value={foo}
   name="foobar"
   {...register("foobar")}
/>

[dolfelt]

@randallmlough Obviously not as easy as using the register function, but this is the solution I've used with success.

import { RadioGroup } from "@headlessui/react";
import { Controller, useForm } from "react-hook-form";

const MyForm = () => {
  const { control } = useForm();
  return (
    <Controller
      control={control}
      defaultValue="default"
      name="fieldName"
      rules={{
        required: "This field is required",
      }}
      render={({ field }) => (
        <RadioGroup
          {...field}
          // Any other non-controlled props here
        >
          <RadioGroup.Label>Role</RadioGroup.Label>
          {/* RadioGroup option fields */}
        </RadioGroup>
      )}
    />
  );
};

Hope this helps!

[simontaisne]

If I’m not mistaken there’s no onBlur nor ref prop available on RadioGroup, making it hard to know if the input has been touched or to focus on it in case of an error.

I'm also wondering what was the reasoning for only using one radio input?

[RobSchilderr]

If I’m not mistaken there’s no onBlur nor ref prop available on RadioGroup, making it hard to know if the input has been touched or to focus on it in case of an error.

I'm also wondering what was the reasoning for only using one radio input?

having the same issue. Why is there no ref on the RadioGroup?