shadcn.io is not affiliated with official shadcn/ui
Form examples · Validation
Real-time Validation Form for React
A username and email form that validates on every keystroke and keeps Submit disabled until both fields pass.
Waiting for submit to show errors makes people fix fields one round at a time. This form sets React Hook Form's mode to onChange, so each field's FieldError updates as you type, and Submit stays disabled until formState.isValid is true. Username and Email are Fields wired by a Controller to one Zod schema. Use it for short forms where instant feedback speeds people up.
Preview
Installation
FAQ
How does this form validate on each keystroke?
useForm sets mode: "onChange" with resolver: zodResolver(formSchema), so React Hook Form runs the schema on every change. The username description says "Validation happens as you type."
Why is Submit disabled?
disabled={!form.formState.isValid}.It stays disabled until both fields pass, and isValid updates as the schema reruns on each change.What username characters are allowed?
Letters, numbers and underscores, at least 3 of them: .min(3, "Username must be at least 3 characters") and .regex(/^[a-zA-Z0-9_]+$/, "Only letters, numbers, and underscores allowed"). The FieldError shows the first that fails.
What does the email field check?
email is z.email("Please enter a valid email address"). The Input is type="email" with placeholder you@example.com, and its description says "Instant feedback on your input."
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
- Custom Validation Messages FormA sign-up form whose username, email and
- 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