shadcn.io is not affiliated with official shadcn/ui
Form examples · Multi Field
Mixed Input Types Form for React
A registration form that mixes text, number, email and phone inputs, each with the validation its type needs.
Different data needs different inputs and different checks. This form uses a text input for the name, a number input for the age, an email input and a phone input, and one Zod schema validates each the way its type needs. The age reaches the form as a number, so the schema checks it with z.number(). Each field is a Field with its FieldLabel, Input and FieldError. Use it for registration, contact or onboarding forms.
Preview
Installation
FAQ
Which input types are on this form?
Full Name is a text input, Age is type="number", Email is type="email" and Phone is type="tel", so phones show a fitting keyboard for each.
What do name, email, and phone check?
fullName needs 2 characters ("Name must be at least 2 characters."), email is z.email(…) ("Please enter a valid email address.") and phone matches a pattern ("Please enter a valid phone number.").
How is the age turned into a number?
The age input's onChange passes undefined for an empty box and Number(event.target.value) otherwise, and its value is field.value ?? "". The schema is z.number(…).min(18, …), so an empty or under-18 age shows "You must be at least 18 years old."
Which phone string passes?
PHONE_PATTERN is ^\+?[1-9]\d{1,14}$: an optional plus, then 2 to 15 digits, such as +15551234567. The placeholder +1 (555) 123-4567 has spaces and brackets, so typed that way it fails.
Related
- Number Input FormAn age form with one number input that
- Phone Input FormA phone number form that checks the
- Four Field Profile FormA profile form with username, email, bio
- Two Field FormA two-field contact form for a name and
- Long Form with Many FieldsA nine-field registration form in three
- Form with Optional FieldsA form with required name and email