Building Robust Multi-Step Forms with React Hook Form and Zod

Building multi-step forms can be a daunting task, especially when dealing with complex validation rules and multiple form steps. However, with the right tools and libraries, it can be a breeze. In this article, we'll explore how to build robust multi-step forms using React Hook Form and Zod, two popular libraries that simplify form handling and validation in React applications.

Introduction to React Hook Form

React Hook Form is a library that simplifies form handling in React by providing a set of hooks that manage form state, validation, and submission. It's designed to be lightweight, flexible, and easy to use, making it a popular choice among React developers. With React Hook Form, you can easily create forms with multiple fields, validate user input, and handle form submission.

Introduction to Zod

Zod is a schema validation library that allows you to define validation rules for your data using a simple and intuitive API. It's designed to be highly customizable and extensible, making it a great choice for complex validation scenarios. With Zod, you can define validation schemas for your form data, ensuring that user input conforms to your application's requirements.

Building a Multi-Step Form with React Hook Form and Zod

To build a multi-step form with React Hook Form and Zod, you'll need to follow these steps:

Step 1: Define Your Form Schema with Zod

First, define your form schema using Zod. This involves creating a Zod schema that defines the structure and validation rules for your form data. For example:

import { z } from 'zod';

const formSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
});

In this example, we define a Zod schema for a simple registration form with name, email, and password fields. Each field has its own validation rules, such as minimum length and email format.

Step 2: Create a React Hook Form Context

Next, create a React Hook Form context that will manage your form state and validation. This involves creating a FormProvider component that wraps your form and provides the necessary context:

import { FormProvider, useForm } from 'react-hook-form';

const MyForm = () => {
  const methods = useForm({
    defaultValues: {
      name: '',
      email: '',
      password: '',
    },
  });

  return (
    <FormProvider {...methods}>
      {/* Your form components go here */}
    </FormProvider>
  );
};

In this example, we create a FormProvider component that provides the necessary context for our form. We also define the default values for our form fields using the defaultValues prop.

Step 3: Create Form Steps

Now, create individual form steps that will be rendered conditionally based on the current step. For example:

const Step1 = () => {
  const { register, errors } = useFormContext();

  return (
    <div>
      <label>
        Name:
        <input type="text" {...register('name')} />
        {errors.name && <div>{errors.name.message}</div>}
      </label>
      <label>
        Email:
        <input type="email" {...register('email')} />
        {errors.email && <div>{errors.email.message}</div>}
      </label>
    </div>
  );
};

const Step2 = () => {
  const { register, errors } = useFormContext();

  return (
    <div>
      <label>
        Password:
        <input type="password" {...register('password')} />
        {errors.password && <div>{errors.password.message}</div>}
      </label>
    </div>
  );
};

In this example, we define two form steps: Step1 and Step2. Each step contains a subset of form fields, along with error messages for validation errors.

Step 4: Conditionally Render Form Steps

Finally, conditionally render each form step based on the current step. For example:

const MyForm = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const { handleSubmit } = useFormContext();

  const onSubmit = async (data) => {
    // Submit form data to server
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {currentStep === 1 && <Step1 />}
      {currentStep === 2 && <Step2 />}
      <button type="button" onClick={() => setCurrentStep(currentStep + 1)}>
        Next
      </button>
    </form>
  );
};

In this example, we conditionally render each form step based on the currentStep state. We also define an onSubmit handler that will be called when the form is submitted.

Conclusion

Building multi-step forms with React Hook Form and Zod is a straightforward process that requires defining a form schema, creating a React Hook Form context, creating individual form steps, and conditionally rendering each step. By following these steps, you can create robust and scalable multi-step forms that provide a seamless user experience. With React Hook Form and Zod, you can focus on building complex forms without worrying about the underlying validation logic.