React Hook Form Controller and React-Bootstrap Form.Check radio

Viewed 17

I'm using React Hook Form and React-Bootstrap and I'm trying to set up a radio button group.

Radio 1 should be selected by default and then the user can switch between them.

Because I'm using Form.Check from React-Bootstrap I'm wrapping it in a React Hook Form Controller (Wrapper component for controlled inputs).

It should look like this:

radio buttons

This works fine for all the normal text inputs:

<Controller
  control={control}
  name="name"
  defaultValue=""
  render={({ field: { onChange, value, ref } }) => (
    <Form.Control
      type="text"
      onChange={onChange}
      placeholder="Name"
      value={value}
      isInvalid={!!errors.name}
      ref={ref}
    />
  )}
/>

But for radio boxes this doesn't seem to work. It's rendered without a default checked box, I can select both of them, and the submitted data is always the same.

Here's the code for the radio boxes:

Controller
  control={control}
  name="myradiovalue"
  defaultValue="radio1"
  render={({ field: { onChange } }) => (
    <>
      <Form.Check
        onChange={onChange}
        type="radio"
        label="Radio 1"
        id="formAdapterRadio1"
        value="radio1"
      />
      <Form.Check
        onChange={onChange}
        type="radio"
        label="Radio 2"
        id="formAdapterRadio2"
        value="radio2"
      />
    </>
  )}
/>

How should this look? Separate Controllers maybe?

0 Answers
Related