form-react

React Hook Form with Zod integration lets you build forms using schema-driven validation. Define a Zod schema, apply zodResolver to useForm, and bind FormField components to your form state. This pattern delivers real-time validation with TypeScript type safety and minimal re-renders.

onBlur validation checks fields when users leave them, reducing noise during typing. onChange validates continuously as users type. React Hook Form's reValidateMode: 'onChange' with mode: 'onBlur' combines both: validate on blur, then re-validate on every change afterward for a responsive experience.

Yes. React Hook Form with Zod provides full TypeScript support through zodResolver, which infers types directly from your Zod schema. This ensures form fields, validation rules, and submit handlers are all type-checked, catching errors at compile time.

Controlled patterns bind inputs to React state; uncontrolled patterns rely on refs and the DOM. React Hook Form supports both approaches, letting you choose based on UX needs. Use controlled for real-time validation and filtering; uncontrolled for simpler, performance-sensitive forms.

React Hook Form with Zod covers most needs. For multi-framework scenarios, the Skill optionally supports TanStack Form. For production forms in React specifically, @hookform/resolvers connects Zod to React Hook Form, and reusable FormField and FormProvider components handle the rest.

Schema-driven validation with Zod centralizes rules in one place, making them reusable across client and server, easier to test, and safer to refactor. Use it for any form complex enough to benefit from type safety and version control of validation logic.