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

Why Multi-Step Forms Matter

Multi-step forms break complex data collection into manageable chunks, improving user completion rates and providing clear progress feedback. Whether you're building registration flows, checkout processes, or multi-section surveys, the combination of React Hook Form and Zod provides a powerful foundation for creating reusable, well-validated form components.

React Hook Form provides an excellent foundation for form management with its uncontrolled component model and minimal re-renders. Zod complements this approach by offering compile-time type safety and schema-based validation that catches errors before they reach users. Together, these libraries form a powerful combination for building production-ready multi-step forms for your web development projects.

The Challenge of Form Complexity

As forms grow in complexity, traditional approaches often lead to spaghetti code with scattered validation logic, duplicated state management, and fragile component relationships. The key to solving these challenges lies in designing for reusability from the start, following patterns similar to those used in Node.js application architecture.

Core Architecture: The Multi-Step Form Pattern

The foundation of a well-designed multi-step form is clear separation between form state, step navigation, and validation logic. React Hook Form manages the form state with its useForm hook, providing methods for registration, error tracking, and submission handling. Zod schemas define the validation rules that ensure data integrity at each step.

Setting Up the Form Schema

Zod schemas for multi-step forms should be designed to reflect the natural grouping of related fields. Rather than validating the entire form at once, consider validating per step while maintaining a unified schema for final submission.

import { z } from 'zod';

const multiStepFormSchema = z.object({
 // Step 1: Personal Information
 firstName: z.string().min(2, "First name must be at least 2 characters"),
 lastName: z.string().min(2, "Last name must be at least 2 characters"),
 email: z.string().email("Please enter a valid email address"),

 // Step 2: Address Details
 street: z.string().min(5, "Please enter a complete street address"),
 city: z.string().min(2, "Please enter your city"),
 zipCode: z.string().regex(/^\d{5}(-\d{4})?$/, "Please enter a valid ZIP code"),

 // Step 3: Preferences
 newsletter: z.boolean().default(false),
 notifications: z.enum(['daily', 'weekly', 'never']).default('weekly'),
});

type FormData = z.infer<typeof multiStepFormSchema>;

This schema design allows validation of individual steps by extracting subsets of fields while maintaining type safety across the entire form. The Zod pick and omit utilities enable creating step-specific schemas without duplicating validation rules.

Creating a Custom Schema Hook

Centralizing schema logic in a custom hook provides a single source of truth for validation rules and default values. This pattern eliminates duplication and makes it easy to maintain consistent validation across create and edit forms.

import { useMemo } from 'react';
import { z } from 'zod';

export const useMultiStepFormSchema = (data = {}) => {
 return useMemo(() => {
 const schema = z.object({
 firstName: z.string().min(2, "First name is required"),
 lastName: z.string().min(2, "Last name is required"),
 email: z.string().email("Please enter a valid email"),
 street: z.string().min(5, "Street address is required"),
 city: z.string().min(2, "City is required"),
 state: z.string().min(2, "State is required"),
 zipCode: z.string().regex(/^\d{5}$/, "5-digit ZIP required"),
 newsletter: z.boolean().default(false),
 notifications: z.enum(['daily', 'weekly', 'never']).default('weekly'),
 });

 const defaults = {
 firstName: data.firstName || '',
 lastName: data.lastName || '',
 email: data.email || '',
 street: data.street || '',
 city: data.city || '',
 state: data.state || '',
 zipCode: data.zipCode || '',
 newsletter: data.newsletter ?? false,
 notifications: data.notifications || 'weekly',
 };

 return { schema, defaults };
 }, [data]);
};

The useMemo wrapper ensures that the schema is only recreated when the data changes, preventing unnecessary re-computations. This performance optimization becomes important in larger forms where schema creation could be expensive.

Step Navigation System

A robust navigation system tracks the user's progress through form steps while preventing premature advancement until validation passes. The navigation state typically includes the current step index, step titles, and validation status for each step.

Managing Step State

The step navigation can be managed through React state or integrated with React Hook Form's field array functionality. For most multi-step forms, a simple state-based approach provides clarity and flexibility.

const steps = [
 { id: 'personal', title: 'Personal Information', fields: ['firstName', 'lastName', 'email'] },
 { id: 'address', title: 'Address Details', fields: ['street', 'city', 'state', 'zipCode'] },
 { id: 'preferences', title: 'Preferences', fields: ['newsletter', 'notifications'] },
];

export const useMultiStepForm = (initialData = {}) => {
 const [currentStep, setCurrentStep] = useState(0);
 const { schema, defaults } = useMultiStepFormSchema(initialData);

 const form = useForm({
 resolver: zodResolver(schema),
 defaultValues: defaults,
 mode: 'onChange',
 });

 const goToNextStep = async () => {
 const currentFields = steps[currentStep].fields;
 const isValid = await form.trigger(currentFields);
 if (isValid) setCurrentStep(prev => Math.min(prev + 1, steps.length - 1));
 };

 const goToPrevStep = () => {
 setCurrentStep(prev => Math.max(prev - 1, 0));
 };

 return { form, currentStep, steps, goToNextStep, goToPrevStep };
};

The trigger method from React Hook Form validates specified fields on demand, enabling step-level validation before navigation. This approach provides immediate feedback while allowing users to correct errors before moving forward.

Building Step Components

Each form step should be encapsulated as a separate component, receiving form methods as props and rendering only the relevant fields. This modular approach makes it easy to add, remove, or reorder steps without affecting other parts of the form. The component architecture here follows principles similar to those in our CSS Modules guide--encapsulating styles and logic for maintainable, reusable code.

Personal Information Step

The first step typically collects basic identifying information. Validation should ensure data quality without creating unnecessary friction.

const PersonalInfoStep = ({ form }) => {
 const { register, formState: { errors } } = form;

 return (
 <div className="form-step">
 <h2>Personal Information</h2>
 <div className="form-field">
 <label htmlFor="firstName">First Name</label>
 <input id="firstName" type="text" {...register('firstName')} />
 {errors.firstName && (
 <span className="error-message">{errors.firstName.message}</span>
 )}
 </div>
 <div className="form-field">
 <label htmlFor="email">Email Address</label>
 <input id="email" type="email" {...register('email')} />
 {errors.email && (
 <span className="error-message">{errors.email.message}</span>
 )}
 </div>
 </div>
 );
};

Each field uses the register function to connect the input to React Hook Form's state management. Error states are determined by checking formState.errors, which contains any validation errors.

Advanced Patterns and Best Practices

Conditional Validation Across Steps

Some forms require validation that spans multiple steps. Zod's refine method enables cross-field validation that considers the complete form state.

const advancedSchema = z.object({
 hasBusiness: z.boolean(),
 businessName: z.string().optional(),
 annualRevenue: z.number().optional(),
}).refine((data) => {
 if (data.hasBusiness && !data.businessName) return false;
 return true;
}, {
 message: "Business name is required when indicating you have a business",
 path: ["businessName"],
});

Form Data Transformation

When integrating with APIs, data formats may differ between the form and the backend. Transformation functions convert between form data structures and API payloads.

const apiToForm = (apiData) => ({
 firstName: apiData.first_name,
 lastName: apiData.last_name,
 email: apiData.contact_email,
});

const formToApi = (formData) => ({
 first_name: formData.firstName,
 last_name: formData.lastName,
 contact_email: formData.email,
});

TypeScript Integration

TypeScript enhances the development experience by catching type mismatches before runtime. When combined with Zod's type inference, schemas become the single source of truth for both validation and TypeScript types.

type RegistrationFormData = z.infer<typeof multiStepFormSchema>;

This type definition ensures that changes to the schema are immediately reflected in TypeScript's type checking, creating a robust foundation for custom software development projects.

Performance Optimization

For complex multi-step forms, careful attention to component structure and memoization can improve responsiveness.

export const useMultiStepFormSchema = ({ data = {} } = {}) => {
 const memoizedData = useMemo(() => ({
 firstName: data.firstName,
 lastName: data.lastName,
 email: data.email,
 }), [data.firstName, data.lastName, data.email]);

 return useMemo(() => {
 const schema = z.object({ /* ... */ });
 const defaults = { /* ... */ };
 return { schema, defaults };
 }, [memoizedData]);
};

Accessibility Considerations

Accessible multi-step forms ensure all users can complete the form successfully:

• Proper focus management during step transitions
• Clear error announcements with ARIA attributes
• Keyboard navigation support throughout the form
• Screen reader compatibility for step indicators

These accessibility patterns are essential for compliance with web standards and provide better experiences for all users, aligning with best practices for digital transformation initiatives.

Conclusion

Building reusable multi-step forms with React Hook Form and Zod creates a foundation for complex data collection workflows that maintain code quality and user experience. The patterns covered in this guide--custom schema hooks, step-level validation, component composition, and type-safe schemas--work together to create maintainable form systems.

Start by defining clear Zod schemas that reflect your data requirements. Create custom hooks to centralize schema and default value logic. Build focused step components that render only their specific fields. Connect everything through a container that manages navigation and submission.

The investment in proper architecture pays dividends throughout the form's lifecycle. Whether you're building a simple contact form or a complex application workflow, these techniques provide a solid foundation for production-ready multi-step forms that integrate seamlessly with your web application development projects.

Sources

1. LogRocket: Building a reusable multi-step form with React Hook Form and Zod
2. Kitemetric: The Ultimate React Hook Form + Zod Pattern for Reusable Create/Edit Forms
3. Contentful: Learn Zod validation with React Hook Form