Prevent default selected radio button on next fields.

[jamesgordo]

I'm trying to create a multistep form where each step has one question with Radio button selection (Yes/No) as answer. However, if I select the answer for the 1st question e.g Yes, when I click the Next button, on the next Question, the YES radio button is already selected even if I did not click/selected the answer yet for the next question.

Demo:
https://codesandbox.io/p/sandbox/drrvc3

Steps to replicate:

1. On first load, click Next without selecting an answer. The Validation works.
   
2. Select Yes for Question 1, then click Next button, the Yes for Step 2 is already selected even if user did not selected it yet.
   

Is there a way to prevent the auto select of the radio button on the next steps/questions?

[oluwatunmiisheii]

import { useState } from "react";
import Question from "./Question";
import { useForm, FormProvider } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

export default function MultiStepForm() {
  const [step, setStep] = useState(0);

  const schema = [
    yup.object().shape({
      question_1: yup.string().required(),
    }),
    yup.object().shape({
      question_2: yup.string().required(),
    }),
    yup.object().shape({
      question_3: yup.string().required(),
    }),
  ];

  const currentSchema = schema[step];

  const methods = useForm({
    shouldUnregister: false,
    defaultValues: {
      question_1: "",
      question_2: "",
      question_3: "",
    },
    resolver: yupResolver(currentSchema),
    mode: "onChange",
  });

  const { handleSubmit, trigger } = methods;

  const handleClickPrev = () => {
    setStep((current) => current - 1);
  };

  const handleClickNext = async () => {
    const valid = await trigger();
    if (valid) setStep(step + 1);
  };

  const onSubmit = (data) => alert(JSON.stringify(data));

  return (
    <FormProvider {...methods}>
      <form>
        {[...Array(3)].map(
          (_, k) =>
            step === k && (
              <Question
                question={{
                  id: k + 1,
                  content: `Question #${k + 1}`,
                  options: [
                    { label: "Yes", value: "Yes" },
                    { label: "No", value: "No" },
                  ],
                }}
              />
            )
        )}

        <div className="flex space-x-4">
          <button
            type="button"
            onClick={handleClickPrev}
            disabled={step === 0}
            className="border px-2 py-1 rounded"
          >
            Previous
          </button>
          {step === 2 ? (
            <button
              type="button"
              onClick={handleSubmit(onSubmit)}
              className="border px-2 py-1 bg-neutral-900 text-neutral-100 rounded"
            >
              Submit
            </button>
          ) : (
            <button
              type="button"
              onClick={handleClickNext}
              className="border px-2 py-1 bg-neutral-900 text-neutral-100 rounded"
            >
              Next
            </button>
          )}
        </div>
      </form>
    </FormProvider>
  );
}

import { Controller, useFormContext } from "react-hook-form";

export default function Question(props) {
  const {
    question: { id, content, options },
  } = props;
  const {
    control,
    formState: { errors },
  } = useFormContext();

  // set input field name
  const name = `question_${id}`;

  return (
    <div>
      <h1>{content}</h1>
      <Controller
        control={control}
        name={name}
        render={({ field }) => {
          return (
            <>
              {options.map((option, index) => (
                <div key={option.content} className="flex items-center gap-1">
                  <input
                    {...field}
                    type="radio"
                    id={`${name}_${option.value}`}
                    value={option.value}
                    defaultChecked={field.value === option.value}
                  />
                  <label
                    htmlFor={`${name}_${option.value}`}
                    className="font-semibold"
                  >
                    {option.label}
                  </label>
                </div>
              ))}
            </>
          );
        }}
      />
      {errors[name] && (
        <span className="text-xs text-red-500">{errors[name].message}</span>
      )}
    </div>
  );
}

Fixed like so, you can find the solution here https://codesandbox.io/p/sandbox/rhf-multistep-radio-forked-sk5p9k?workspaceId=7022911d-a118-40f4-9603-b330a7cac3f7

[jamesgordo]

Thank u so much for the help @oluwatunmiisheii!