shadcn.io is not affiliated with official shadcn/ui
Form examples · Validation
Custom Validation Messages Form for React
A sign-up form whose username, email and age rules each answer with a friendly custom message and an emoji.
Invalid input tells people nothing. Each rule in this form's Zod schema carries its own conversational message, such as "Come on, at least 3 characters! 😅", and the field's FieldError shows it under the input. Username, Email and Age are each a Field wired to React Hook Form by a Controller. Use it for consumer sign-ups or any form where friendlier errors help people finish.
Preview
Installation
FAQ
Which username messages are in the schema?
.min(3) says "Come on, at least 3 characters! 😅", .max(20) says "Whoa there! Keep it under 20 characters. 🛑", and .regex(/^[a-zA-Z0-9_]+$/) says "Letters, numbers, and underscores only, please! 🔤". The FieldError shows the first one that fails.
What does a bad email say?
email is z.email("That doesn't look like an email address. 📧"). The form sets noValidate, so the browser's own email check doesn't get there first. Only Username has a description: "Choose a unique username."
Which age messages appear?
.min(13) says "You must be at least 13 years old. 🚸" and .max(120) says "Please enter a realistic age. 🎂". Age is z.number with the error "Age must be a number! 🔢" for anything that isn't a number.
What does a blank age produce?
age starts as undefined, and clearing the input sets it back to undefined, so a blank age shows "Age must be a number! 🔢". It never turns into 0.
Related
- Required Field Validation FormA name and an email field marked with
- Min/Max Length Validation FormA username of 3 to 20 characters and a
- Password Strength Validation FormA password that needs 8 characters with
- Conditional Validation FormA form whose company fields appear, and
- Simple Text Input FormA form with one username text input that
- Email Validation FormAn email field and a confirm email field