shadcn.io is not affiliated with official shadcn/ui
Form examples · Validation
Email Validation Form for React
An email field and a confirm email field that must match, each checked for a valid address first.
A mistyped email can lock someone out of their account. This form asks for the address twice: each field must hold a valid email, and a Zod refine on the whole object compares them, putting "Emails don't match" on the confirm field. Both are Fields wired to React Hook Form by a Controller. Use it for account creation, email changes or password resets.
Preview
Installation
FAQ
How does the confirm-email check work?
The object's refine checks data.email === data.confirmEmail. When they differ it fails with "Emails don't match" on path: ["confirmEmail"], so the message shows in the confirm field's FieldError.
What does each field check before the match?
email is .min(1, "Email is required") piped into z.email("Please enter a valid email address"). confirmEmail is .min(1, "Please confirm your email") piped into the same z.email. An empty field shows the required message, not the format one.
Does the match ignore case?
No. The refine uses ===, so You@example.com and you@example.com don't match, and Confirm Email shows "Emails don't match".
How are the two inputs set up?
Both are Inputs with type="email" and placeholder you@example.com, with field spread onto them. defaultValues sets both to "", and the form's noValidate lets the Zod messages show instead of the browser's.
Related
- Password Strength Validation FormA password that needs 8 characters with
- Email Input FormA newsletter form with one email input
- Required Field Validation FormA name and an email field marked with
- Two Field FormA two-field contact form for a name and
- Real-time Validation FormA username and email form that validates
- Conditional Validation FormA form whose company fields appear, and