shadcn.io is not affiliated with official shadcn/ui
Form examples · Validation
Password Strength Validation Form for React
A password that needs 8 characters with an uppercase letter, a lowercase letter, a number and a symbol, plus a matching confirmation.
Weak passwords put accounts at risk from day one. This form's Zod schema chains a minimum length and four regex rules, for an uppercase letter, a lowercase letter, a number and a special character, and a refine checks that the confirmation matches. Both password inputs are Fields wired to React Hook Form by a Controller, with the rules spelled out in a FieldDescription. Use it for account creation or password changes.
Preview
Installation
FAQ
Which password rules run, and which message shows?
.min(8, "Password must be at least 8 characters"), then regexes for [A-Z], [a-z], [0-9] and [^A-Za-z0-9], each with its own message. The FieldError shows the first one that fails, in that order.
How are the two passwords compared?
The object's refine checks data.password === data.confirmPassword and fails with "Passwords don't match" on path: ["confirmPassword"], so it shows under Confirm Password. confirmPassword itself is just z.string().
Where are the rules written before an error?
The password's FieldDescription says "Must contain uppercase, lowercase, number, and special character." Confirm Password's says "Re-enter your password to confirm."
Are both fields masked?
Yes. Both Inputs are type="password", with the placeholders "Enter password" and "Confirm password", and field spread onto them.
Related
- Email Validation FormAn email field and a confirm email field
- Password Input FormA form with one password input that needs
- Min/Max Length Validation FormA username of 3 to 20 characters and a
- Custom Validation Messages FormA sign-up form whose username, email and
- Signup FormA sign-up form with full name, email, a
- Conditional Validation FormA form whose company fields appear, and