React Hook Form + Zod + Shadcn UI
A comprehensive guide to building production-ready forms with validation
Experience how different validation modes affect user experience. Try typing in each field to see when validation occurs.
Validates on every keystroke
Validates when you leave the field
Validates only when you click submit
Validates on blur, then on every change
| Mode | When Validation Occurs | Best For |
|---|---|---|
| onChange | Every keystroke | Real-time feedback (e.g., password strength) |
| onBlur | When leaving the field | Less intrusive validation (recommended for most cases) |
| onSubmit | When form is submitted | Simple forms, minimal interruption |
| onTouched | First blur, then every change | Balance between UX and feedback |
The onBlur mode is recommended for most forms as it provides a good balance between user experience and validation feedback. Use onChange for fields that benefit from immediate feedback, like password strength indicators.
Built with Next.js 16, React Hook Form, Zod, and Shadcn UI