shadcn.io is not affiliated with official shadcn/ui
Form examples · Multi Field
Two Field Form for React
A two-field contact form for a name and an email address, each with a description and its own validation error.
Contact forms need just enough fields to reach people without overwhelming them. This one asks for a name and an email: each is a Field with its FieldLabel, an Input, a FieldDescription and a FieldError, stacked in a FieldGroup. A Controller connects each input to React Hook Form, and one Zod schema checks that the name has at least 2 characters and the email is a valid address. Use it for newsletter sign-ups, contact requests or waitlists.
Preview
Installation
FAQ
Which two fields does this form register?
name is z.string().min(2, …) with "Name must be at least 2 characters." email is z.email(…) with "Please enter a valid email address." Each has its own Controller, and the input takes the controller's field props.
What do the descriptions say?
Name's FieldDescription is "Your full name." Email's is "Your email address." The placeholders are John Doe and john@example.com.
How is the email input different from name?
It sets type="email", so phones show an email keyboard; name is a text input. Each FieldLabel has an htmlFor that matches its input's id, such as two-field-form-email.
What are the starting values?
defaultValues sets email and name to empty strings, so an empty submit fails both rules. The form is w-full max-w-md.
Related
- Three Field FormA three-field form with first and last
- Simple Text Input FormA form with one username text input that
- Email Input FormA newsletter form with one email input
- Form with Optional FieldsA form with required name and email
- Mixed Input Types FormA registration form that mixes text
- Form with Field GroupsA form split into Personal Information