React Hook Form: Values reset when navigating steps (multi-step form)

[zixuanng8368-sudo]

I'm building a multi-step form using:

React Hook Form
Zod
Next.js (App Router)

Each step conditionally renders different fields using a switch(currentStep) pattern.

When I click Next to move to another step:
the isValid is set to true and allow me to move to the next step
but the previously filled values (e.g. title, shortDescription, platform) become undefined
form.watch() confirms the values are actually lost, not just UI
I would like to ask what might be the problem here
(The form is not finished yet)

"use client";
import {
  EventMethod,
  EventPlatform,
  SpeakerRole,
} from "@/app/generated/prisma/enums";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
  useComboboxAnchor,
} from "@/components/ui/combobox";
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldError,
  FieldDescription,
  FieldSet,
  FieldLegend,
  FieldContent,
} from "@/components/ui/field";
import { FileInput } from "@/components/ui/file-input";
import { Input } from "@/components/ui/input";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Progress } from "@/components/ui/progress";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Spinner } from "@/components/ui/spinner";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { zodResolver } from "@hookform/resolvers/zod";
import { format } from "date-fns";
import { XIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { toast } from "sonner";
import z from "zod/v4";

const highlightSchema = z.object({
  description: z.string().min(1),
});

const contentSchema = z.object({
  title: z.string().min(1),
  description: z.string().min(1),
  highlights: z
    .array(highlightSchema)
    .min(1, "At least one highlight is needed")
    .max(5, "Up to 5 highlights can be added"),
  images: z.array(z.instanceof(File)).min(1),
});

const ticketSchema = z.object({
  name: z.string(),
  price: z.number().min(0),
  quantity: z.number().int().optional(),
});

const sessionSchema = z.object({
  description: z.string().optional(),
  startTime: z.string(),
  endTime: z.string(),
});

const speakerSchema = z.object({
  name: z.string(),
  bio: z.string().optional(),
  image: z.instanceof(File).optional(),
  role: z.enum(SpeakerRole),
});

const createEventSchema = z.object({
  title: z.string().min(1),
  shortDescription: z.string().min(1),
  categories: z.array(z.string()).min(1),
  method: z.enum(EventMethod),
  venue: z.string().optional(),
  platform: z.enum(EventPlatform).optional(),
  date: z.date(),
  startTime: z.string(),
  endTime: z.string(),
  status: z.boolean(),

  content: contentSchema,
  tickets: z.array(ticketSchema).optional(),
  sessions: z.array(sessionSchema).optional(),
  speakers: z.array(speakerSchema).optional(),
});

type createEventForm = z.infer<typeof createEventSchema>;

export default function CreateEventForm() {
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const anchor = useComboboxAnchor();
  const steps = [
    {
      title: "Step 1: Event",
      description: "",
      fields: [
        "title",
        "shortDescription",
        "categories",
        "method",
        "venue",
        "platform",
        "date",
        "startTime",
        "endTime",
        "status",
      ],
    },
    {
      title: "Step 2: Event Content",
      description:
        "Tell people what your event is about. This helps attract attendees.",
      fields: ["content"],
    },
    {
      title: "Step 3: Tickets",
      description: "",
      fields: ["tickets"],
    },
    {
      title: "Step 4: Agenda",
      description: "",
      fields: ["sessions"],
    },
    {
      title: "Step 5: Speakers",
      description: "",
      fields: ["speakers"],
    },
  ] as const;

  const [currentStep, setCurrentStep] = useState(0);
  const currentForm = steps[currentStep];
  const isLastStep = currentStep === steps.length - 1;
  const progress = ((currentStep + 1) / steps.length) * 100;

  const form = useForm<createEventForm>({
    resolver: zodResolver(createEventSchema),
    defaultValues: {
      title: "",
      shortDescription: "",
      method: EventMethod.PHYSICAL,
      venue: "",
      categories: [],
      date: new Date(),
      startTime: "08:00",
      endTime: "10:00",
      status: true,
      platform: undefined,
      content: { 
        description: "",
        highlights: [{description: ""}] ,
        images: [],
      },
      tickets: [],
      sessions: [],
      speakers: [],
    },
    shouldUnregister: false,
    mode: "onChange",
  });

  const method = form.watch("method");
  useEffect(() => {
    if (method === "ONLINE") {
      form.setValue("venue", "");
    }
    if (method === "PHYSICAL") {
      form.setValue("platform", undefined);
    }
  }, [method, form]);

   const {
     fields: highlightFields,
     append: highlightAppend,
     remove: highlightRemove,
   } = useFieldArray({
     control: form.control,
     name: "content.highlights",
   });

  async function handleNext() {
    const currentFields = steps[currentStep].fields;
    const isValid = await form.trigger(currentFields);

    if (isValid && !isLastStep) {
      setCurrentStep((prev) => prev + 1);
    }
  }

  function handleBack() {
    if (currentStep > 0) {
      setCurrentStep((prev) => prev - 1);
    }
  }

  async function handleCreateEvent(data: createEventForm) {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    toast.success("Form successfully submitted");
    console.log(data);
  }

  function renderCurrentStepContent() {
    switch (currentStep) {
      case 0: {
        return (
          <FieldGroup>
            <Controller
              name="title"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field>
                  <FieldLabel data-invalid={fieldState.invalid} htmlFor="title">
                    Event Title
                  </FieldLabel>
                  <Input
                    id="title"
                    {...field}
                    aria-invalid={fieldState.invalid}
                  />
                  {fieldState.invalid && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                </Field>
              )}
            />

            <Controller
              name="shortDescription"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field>
                  <FieldLabel
                    data-invalid={fieldState.invalid}
                    htmlFor="overview"
                  >
                    Short Description
                  </FieldLabel>
                  <Textarea
                    id="overview"
                    {...field}
                    aria-invalid={fieldState.invalid}
                  />
                  {fieldState.error && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                </Field>
              )}
            />

            <Controller
              name="categories"
              control={form.control}
              render={({ field, fieldState }) => {
                const options = [
                  { id: "cat1", label: "Technology" },
                  { id: "cat2", label: "Business" },
                  { id: "cat3", label: "Gaming" },
                  { id: "cat4", label: "Coding" },
                ];
                const itemsValues = options.map((item) => item.id);
                const labelByValue = new Map(
                  options.map((item) => [item.id, item.label]),
                );
                

                return (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="category">Category</FieldLabel>
                    <Combobox
                      multiple
                      autoHighlight
                      items={itemsValues}
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={false}
                    >
                      <ComboboxChips ref={anchor} className="w-full">
                        <ComboboxValue>
                          {(values) => (
                            <>
                              {values.map((value: string) => (
                                <ComboboxChip key={value}>
                                  {labelByValue.get(value) ?? value}
                                </ComboboxChip>
                              ))}
                              <ComboboxChipsInput
                                placeholder=""
                                aria-invalid={fieldState.invalid}
                              />
                            </>
                          )}
                        </ComboboxValue>
                      </ComboboxChips>
                      <ComboboxContent anchor={anchor}>
                        <ComboboxEmpty>Category not found.</ComboboxEmpty>
                        <ComboboxList>
                          {(item) => (
                            <ComboboxItem key={item} value={item}>
                              {labelByValue.get(item) ?? item}
                            </ComboboxItem>
                          )}
                        </ComboboxList>
                      </ComboboxContent>
                    </Combobox>
                    <FieldDescription></FieldDescription>
                    {fieldState.invalid && (
                      <FieldError errors={[fieldState.error]} />
                    )}
                  </Field>
                );
              }}
            />

            <Controller
              name="method"
              control={form.control}
              render={({ field, fieldState }) => {
                const options = [
                  { label: "Physical", value: "PHYSICAL" },
                  { label: "Online", value: "ONLINE" },
                  { label: "Hybrid", value: "HYBRID" },
                ];

                return (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="method">Conduct Method</FieldLabel>

                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger
                        id="method"
                        aria-invalid={fieldState.invalid}
                      >
                        <SelectValue placeholder="Select a conduct method" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectLabel>Select an Option</SelectLabel>
                          {options.map((item) => (
                            <SelectItem key={item.value} value={item.value}>
                              {item.label}
                            </SelectItem>
                          ))}
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                    {fieldState.invalid && (
                      <FieldError errors={[fieldState.error]} />
                    )}
                  </Field>
                );
              }}
            />

            <Controller
              name="venue"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="venue">Venue</FieldLabel>
                  <Input
                    id="venue"
                    {...field}
                    disabled={method === "ONLINE"}
                    aria-invalid={fieldState.invalid}
                  />
                  {fieldState.error && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                </Field>
              )}
            />

            <Controller
              name="platform"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>Platform</FieldLabel>
                  <Select
                    value={field.value}
                    onValueChange={field.onChange}
                    disabled={method === "PHYSICAL"}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select a platform" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectLabel>Platform</SelectLabel>
                        <SelectItem value="GOOGLE_MEET">Google Meet</SelectItem>
                        <SelectItem value="MICROSOFT_TEAMS">
                          Microsoft Team
                        </SelectItem>
                        <SelectItem value="WEBEX">Webex</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
              )}
            />

            <FieldSet className="p-2 border rounded-2xl">
              <FieldLegend>Date & Time</FieldLegend>
              <FieldGroup className="md:flex flex-row">
                <Controller
                  name="date"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel>Date</FieldLabel>
                      <Popover
                        open={isCalendarOpen}
                        onOpenChange={setIsCalendarOpen}
                      >
                        <PopoverTrigger asChild>
                          <Button variant={"outline"}>
                            {field.value
                              ? format(field.value, "PPP")
                              : "Select a date"}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-fit">
                          <Calendar
                            id="calendar"
                            mode="single"
                            captionLayout="dropdown"
                            className="rounded-lg p-0"
                            selected={field.value}
                            onSelect={(date) => {
                              if (date) {
                                field.onChange(date);
                              }
                            }}
                          />
                        </PopoverContent>
                      </Popover>
                    </Field>
                  )}
                />
                <Controller
                  name="startTime"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel>Start Time</FieldLabel>
                      <Input type="time" {...field} />
                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
                <Controller
                  name="endTime"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel>End Time</FieldLabel>
                      <Input type="time" {...field} />
                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
              </FieldGroup>
            </FieldSet>

            <Controller
              name="status"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="public">
                    Draft
                    <Switch
                      onCheckedChange={field.onChange}
                      checked={field.value}
                    />
                  </FieldLabel>
                  {fieldState.error && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                </Field>
              )}
            />
          </FieldGroup>
        );
      }
      case 1: {
        return (
          <FieldGroup>
            
            <Controller
              name="content.description"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>Description</FieldLabel>
                  <FieldDescription>
                    A detailed explanation of what will happen during the event.
                  </FieldDescription>
                  <Textarea {...field} rows={4} />
                  {fieldState.invalid && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                </Field>
              )}
            />

             <FieldSet>
              <FieldLegend>Highlights</FieldLegend>
              <FieldDescription>
                Add highlights here to highlight the event
              </FieldDescription>
              <FieldGroup>
                {highlightFields.map((field, index) => (
                  <Controller
                    key={field.id}
                    name={`content.highlights.${index}.description`}
                    control={form.control}
                    render={({ field: controllerField, fieldState }) => (
                      <Field
                        orientation="horizontal"
                        data-invalid={fieldState.invalid}
                      >
                        <FieldContent>
                          <InputGroup>
                            <InputGroupInput
                              {...controllerField}
                              id={`highlight-${index}`}
                              aria-invalid={fieldState.invalid}
                              placeholder="Input Event highlight here"
                            />
                            {highlightFields.length > 1 && (
                              <InputGroupAddon align="inline-end">
                                <InputGroupButton
                                  type="button"
                                  variant="ghost"
                                  size="icon-xs"
                                  onClick={() => highlightRemove(index)}
                                  aria-label={`Remove highlight ${index + 1}`}
                                >
                                  <XIcon />
                                </InputGroupButton>
                              </InputGroupAddon>
                            )}
                          </InputGroup>
                          {fieldState.invalid && (
                            <FieldError errors={[fieldState.error]} />
                          )}
                        </FieldContent>
                      </Field>
                    )}
                  />
                ))}
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => highlightAppend({ description: "" })}
                  disabled={highlightFields.length >= 5}
                >
                  Add Event Highlight
                </Button>
              </FieldGroup>
              {form.formState.errors.content?.description?.root && (
                <FieldError
                  errors={[form.formState.errors.content?.description?.root]}
                />
              )}
            </FieldSet>

            <Controller
              name="content.images"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="images">Images</FieldLabel>
                  {fieldState.invalid && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                  <FileInput
                    onChange={(files) => field.onChange(files)}
                    id="images"
                    multiple
                    maxFiles={2}
                    maxSize={5 * 1024 * 1024}
                    showPreview={true}
                    previewSize="md"
                    accept="image/*"
                    aria-invalid={fieldState.invalid}
                  />
                </Field>
              )}
            />
          </FieldGroup>
        );
      }
      case 2: {
        return <FieldGroup>Step 3</FieldGroup>;
      }
    }
  }

  return (
    <Card className="max-w-3xl mx-auto">
      <CardHeader>
        <div className="space-y-2">
          <CardTitle className="flex items-center justify-between">
            {currentForm.title}
            <p className="text-sx text-muted-foreground">
              Step {currentStep + 1} of {steps.length}
            </p>
          </CardTitle>
          <CardDescription>{currentForm.description}</CardDescription>
          <Progress value={progress} />
        </div>
      </CardHeader>
      <CardContent>
        <form
          id="create-event-form"
          onSubmit={form.handleSubmit(handleCreateEvent)}
        >
          {renderCurrentStepContent()}
        </form>
        <pre className="bg-muted p-4 rounded-2xl my-2">
          {JSON.stringify(form.watch(), null, 2)}
        </pre>
      </CardContent>
      <CardFooter>
        <Field className="justify-between" orientation="horizontal">
          {currentStep > 0 && (
            <Button type="button" variant={"secondary"} onClick={handleBack}>
              Back
            </Button>
          )}
          {!isLastStep && (
            <Button type="button" variant={"secondary"} onClick={handleNext}>
              Next
            </Button>
          )}
          {isLastStep && (
            <Button
              type="submit"
              form="create-event-form"
              disabled={form.formState.isSubmitting}
            >
              {form.formState.isSubmitting ? <Spinner /> : "Submit"}
            </Button>
          )}
        </Field>
      </CardFooter>
    </Card>
  );
}

[cookesan]

shouldUnregister: false should prevent values from being removed just because a step unmounts. So if values are really becoming undefined, I would look for code that is setting or resetting them rather than the step switch itself.

One thing in the posted code is expected:

useEffect(() => {
  if (method === "ONLINE") {
    form.setValue("venue", "");
  }
  if (method === "PHYSICAL") {
    form.setValue("platform", undefined);
  }
}, [method, form]);

With the default method: EventMethod.PHYSICAL, platform is intentionally set to undefined. That one is not caused by navigation.

For title and shortDescription, form.trigger(currentFields) and setCurrentStep(...) should not clear them. I would debug in this order:

async function handleNext() {
  console.log("before", form.getValues());
  const isValid = await form.trigger(steps[currentStep].fields);
  console.log("after trigger", form.getValues());

  if (isValid && !isLastStep) {
    setCurrentStep((prev) => prev + 1);
    queueMicrotask(() => console.log("after step", form.getValues()));
  }
}

If the values disappear only after the step changes, replace one custom field with a plain registered input temporarily:

<input {...form.register("title")} />

If the plain input keeps its value, the issue is in the custom field wiring. If it also resets, check whether the whole CreateEventForm component is being remounted by a parent key, route transition, or conditional render. Also make sure you are not passing a changing values prop or calling reset() elsewhere.

[zixuanng8368-sudo]

Hi, thanks for the valuable feedback to the question, i will try to implement the solution and update the progress when i have the time.

[cookesan]

Glad the feedback was useful. Thanks for reporting back; an update after you try it will make the thread more useful for others dealing with multi-step form state.

[BrendanC23]

I would recommend removing the useEffect entirely. See the React docs. Instead of a useEffect, you can move the logic into an onChange handler in the <Select /> component.

[fahadsohail482]

@zixuanng8368-sudo I would suggest you to try this.
This will reset the form with the latest value each time and you will not lose the previous values.

  async function handleNext() {
    const currentFields = steps[currentStep].fields;
    const isValid = await form.trigger(currentFields);

    if (isValid && !isLastStep) {
      form.reset({ ...getValues() }, { keepValues: true });
      setCurrentStep((prev) => prev + 1);
    }
  }

[zixuanng8368-sudo]

Hi, thanks for the valuable feedback to the question, i will try to implement the solution and update the progress when i have the time.

[chrisjcthomas]

By default, React Hook Form unregisters inputs when their components are unmounted from the DOM.

When you use a conditional rendering switch-case pattern like switch(currentStep) to render different steps, navigating to step 2 completely unmounts the inputs from step 1. Even with shouldUnregister: false configured, unmounting a component wrapped in a Controller can lead to values being lost or reset to undefined if there are side-effect useEffect hooks watching those values (such as your effect watching method), or if the resolver re-validates the form on change.

Solution 1: Use CSS to hide/show steps (Recommended)

Instead of unmounting step components conditionally, keep them all mounted in the DOM and toggle their visibility using CSS (display: none or Tailwind's hidden class). This keeps all inputs registered and ensures no form values are lost when navigating.

export default function CreateEventForm() {
  // ...
  return (
    <Card className="max-w-3xl mx-auto">
      <form onSubmit={form.handleSubmit(handleCreateEvent)}>
        {/* Step 1 */}
        <div className={currentStep === 0 ? "block" : "hidden"}>
          <StepOneFields control={form.control} />
        </div>

        {/* Step 2 */}
        <div className={currentStep === 1 ? "block" : "hidden"}>
          <StepTwoFields control={form.control} />
        </div>
        
        {/* ...Other Steps */}
      </form>
    </Card>
  );
}

Solution 2: Lift state or separate schemas per step

If you must completely unmount the steps, it is best practice to keep a local parent state to store the completed step data, or define a separate schema/resolver for each step.
When navigating to the next step, copy the form's current values into the parent state. When the final step is submitted, merge the step data together. This avoids validating the entire schema (which contains required fields for future steps) on early stages.

[BrendanC23]

Can you provide a CodeSandbox reproduction of this? It data is being lost on unmount even with shouldUnregister: false, that seems like a bug that should be fixed.

Even with shouldUnregister: false configured, unmounting a component wrapped in a Controller can lead to values being lost or reset to undefined if there are side-effect useEffect hooks watching those values (such as your effect watching method), or if the resolver re-validates the form on change.