shadcn.io is not affiliated with official shadcn/ui
Form examples · Basic Forms
Email Input Form for React
A newsletter form with one email input that checks the address format before it subscribes.
Email inputs need format validation to catch typos. This form checks the address with Zod's z.email(), so an address like user@domain fails with "Please enter a valid email address." A Controller connects the Input to React Hook Form inside a Field, with a FieldDescription for the privacy note and a FieldError for the message, and type="email" brings up the email keyboard on phones. Use it for newsletter sign-ups, account creation or contact forms.
Preview
Installation
FAQ
What does the email schema check?
email is z.email("Please enter a valid email address."). When it fails, the Field gets invalid and FieldError shows the message. you@example.com is only the placeholder, not a value.
Why is the input type email?
type="email" shows the email keyboard on phones, and the browser also checks the format when the form submits: a malformed address gets the browser's own hint before Zod runs. Add noValidate to the form if you want only the Zod message.
Where is the privacy sentence defined?
FieldDescription renders "We'll never share your email with anyone." It stays visible whether the field is empty, filled or invalid, with the FieldError below it.
How does Subscribe get the address?
The Controller for name="email" spreads field onto the Input, so its value, change, blur and ref go through React Hook Form. FieldLabel htmlFor matches the input's id, email-input-form-email. Subscribe is a type="submit" button, and form.handleSubmit(onSubmit) calls onSubmit with the parsed values.
Related
- Simple Text Input FormA form with one username text input that
- URL Input FormA form with one website input that only
- Phone Input FormA phone number form that checks the
- Email InputAn email field with a mail icon inside it
- Simple Input with Label FieldAn email input with its label above it
- Search Input FormA search form with one search input that