Forms & Validation

Here are the 30 main questions to ask first when someone requests a React form, along with concise suggestions based on their answers (updated for React 19 in 2

Explore 13 examples of forms and validation, from basic uncontrolled forms to advanced patterns using Zod and React Hook Form.

In React 19, you don't need to write fully controlled inputs manually for most native fields. But controlled patterns (especially via Controller) are still reco

Define schemas, validate data at runtime, and handle errors - the foundation of type-safe validation in TypeScript.

Zod types for forms and APIs - string, number, object, array, enum, refine, transform, and how to infer TypeScript types from schemas.

Learn to shape, coerce, and add custom validation logic using Zod's transform, refine, superRefine, preprocess, and pipe functions.

Derive TypeScript types from Zod schemas with z.infer, z.input, and z.output - single source of truth for both runtime validation and compile-time safety.

Learn to build performant, flexible forms with React Hook Form, minimizing re-renders. Understand setup, register, Controller, and core patterns.

Integrate Zod schemas with React Hook Form using @hookform/resolvers/zod to build fully typed, schema-driven forms with robust validation.

Validate Next.js form data with Zod inside Server Actions. Use useActionState to manage and display form errors and pending states.

Copy-paste patterns for the most common forms - login, signup, and contact - with Zod validation and proper UX.

Multi-step wizards, dynamic field arrays, and conditional fields - patterns for forms that go beyond the basics.

Validate file uploads with Zod, implement drag-and-drop, and show image previews - all with proper type safety.

Field errors, form errors, toast notifications, and inline messages - patterns for showing validation feedback to users.

Build forms with shadcn's Form component - react-hook-form + Zod + accessible UI components, all wired together.

Use useOptimistic with forms to show instant feedback while server actions process - with pending UI and automatic rollback on failure.

Learn to build accessible forms using ARIA attributes, focus management, and error announcements, ensuring usability for all users.

Manage complex multi-step form state with useReducer - explicit actions like SETFIELD, NEXTSTEP, and VALIDATE make state transitions predictable, testable, and

A single-page roundup of every highlight bullet from the 19 pages in the Forms & Validation section, grouped by source page so you can scan all 114 takeaways without opening each article individually.