shadcn.io is not affiliated with official shadcn/ui
Form examples · Validation
Required Field Validation Form for React
A name and an email field marked with asterisks that must both be filled in before the form submits.
Empty submissions waste everyone's time. Name and Email are marked with an asterisk in their labels, and the Zod schema rejects an empty name with "Name is required" and anything that isn't an address with "Invalid email address". Each is a Field wired to React Hook Form by a Controller, with a FieldError for the message. Use it for contact forms, sign-ups, or any form with fields that can't be skipped.
Preview
Installation
FAQ
How is the asterisk shown?
It's part of the label text: the FieldLabels read Name and Email . Nothing else marks the fields required.
Which message shows for an empty submit?
Both fields start as "". An empty name fails .min(1, "Name is required"), and an empty email fails z.email("Invalid email address"), so each FieldError shows its message.
Why is there no separate required message for email?
z.email treats an empty string as an invalid address, so blank and malformed emails share "Invalid email address". Add .min(1, …) before it, as the email validation example does, if blank should read differently.
What does the description under each field say?
Both FieldDescriptions say "This field is required." That line is static help text, not the validation message, which shows in the FieldError below it.
Related
- Simple Text Input FormA form with one username text input that
- Custom Validation Messages FormA sign-up form whose username, email and
- Form with Optional FieldsA form with required name and email
- Email Input FormA newsletter form with one email input
- Real-time Validation FormA username and email form that validates
- Conditional Validation FormA form whose company fields appear, and