shadcn.io is not affiliated with official shadcn/ui
Form examples · Multi Field
Long Form with Many Fields for React
A nine-field registration form in three sections, Account Details, Personal Information and Address, with a full-width submit button.
Registration forms with nine or more fields feel intimidating without structure. This one sorts username, email, names, phone and a full address into three FieldSets with a FieldLegend each, using two- and three-column grids where fields pair up. Every field is a Field with its FieldLabel, Input and FieldError, wired to React Hook Form by a Controller and checked by one Zod schema. Use it for full registration, checkout or profile setup.
Preview
Installation
FAQ
How are the nine fields grouped?
Three FieldSets, each with a FieldLegend and a FieldGroup: Account Details (username, email), Personal Information (first name, last name, phone) and Address (street, then city, state and ZIP). The form is w-full max-w-md.
Which rows are grids?
First and last name share a grid grid-cols-2 gap-4 row. City, State and ZIP share a grid grid-cols-3 gap-4 row. Every other field spans the width.
What does the schema check, with no custom messages?
Username needs 3 characters; first name, last name, street, city and state need 2; email is z.email(); phone and ZIP match patterns. None sets a message, so the errors are Zod's defaults.
What do the phone and ZIP patterns accept?
PHONE_PATTERN is ^\+?[1-9]\d{1,14}$: an optional plus, then 2 to 15 digits with no spaces or punctuation. ZIP_CODE_PATTERN is ^\d{5}(-\d{4})?$, such as 10001 or 10001-1234.
Related
- Form with Field GroupsA form split into Personal Information
- Mixed Input Types FormA registration form that mixes text
- Signup FormA sign-up form with full name, email, a
- Three Field FormA three-field form with first and last
- Form with Optional FieldsA form with required name and email
- Accordion Form with Icon SectionsA form split into personal, contact and