react-hooks-forms and default checked radio button

user_1406168 0
Viewed 15126

I am using react hooks forms and has tried most thing to default check a radio button:

<FormGroup tag="fieldset">
  <FormGroup check>
    <Label check>
      <Input type="radio" name="isIBAN" innerRef={register} defaultChecked/> IBAN
    </Label>
  </FormGroup>
  <FormGroup check>
    <Label check>
      <Input type="radio" name="isIBAN" innerRef={register} value={false} /> BIC/SWIFT
    </Label>
  </FormGroup>             
</FormGroup>

I dont know if you can do it from the default values:

const { register, handleSubmit, errors, setValue, getValues  } = useForm(
  {
    defaultValues:{
      accountNr: "XXXXKB20201555555555",
      bic:"XXXDKKK",
      isIBAN:true
    }
  }
);

How is the correct way to default the first radio button to checked? I could make another hook but there must be some built in in react hooks forms?

react-hook-form reactjs
1 Answers

Please take a look at the codesandbox demo for the radio group example.

const defaultValues = {
  Native: "",
  TextField: "",
  Select: "",
  ReactSelect: { value: "vanilla", label: "Vanilla" },
  Checkbox: false,
  switch: false,
  RadioGroup: "female", // default value is the radio input value
  numberFormat: 123456789,
  downShift: "apple"
};

<section>
  <label>Radio Group</label>
  <Controller
    as={
      <RadioGroup aria-label="gender">
        <FormControlLabel
          value="female"
          control={<Radio />}
          label="Female"
        />
        <FormControlLabel
          value="male"
          control={<Radio />}
          label="Male"
        />
      </RadioGroup>
    }
    name="RadioGroup"
    control={control}
  />
</section>
user_4092750
Related