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

13 examples to get you started with Forms & Validation -- 8 basic and 5 intermediate.

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.

Shape, coerce, and add custom validation logic with transform, refine, superRefine, preprocess, and pipe.

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.

Performant, flexible forms with minimal re-renders — setup, register, Controller, and core patterns.

Integrate Zod schemas with react-hook-form via @hookform/resolvers/zod for fully typed, schema-driven forms.

Validate form data with Zod inside Server Actions and use useActionState to display errors and pending state.

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.

ARIA attributes, focus management, and error announcements — make every form usable by everyone.

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