shadcn.io is not affiliated with official shadcn/ui
Form examples · Layouts
Spacious Form with Sections for React
A spacious form split into Personal Information and Address sections, each with its own heading and description.
Longer forms read better in sections. This one has two FieldSets, Personal Information and Address, each with a FieldLegend, a FieldDescription and its own FieldGroup of fields, and generous gaps between everything. Each Field has its FieldLabel, Input, an optional FieldDescription and its FieldError, wired to React Hook Form with a Controller and checked by one Zod schema. Use it for registration, account settings and onboarding.
Preview
Installation
FAQ
Where does the extra space come from?
The outer FieldGroup is gap-8, so the two sections and Save Changes sit well apart. Inside each section, the fields' FieldGroup is gap-6. The form is max-w-2xl.
How are the two sections labeled?
Each section is a FieldSet with a FieldLegend, Personal Information or Address, and a FieldDescription under it: Tell us about yourself. and Where are you located? The legend names the group for screen readers too.
What does the schema check?
firstName, lastName, street and city are z.string().min(2) and email is z.email(). There are no custom messages, so FieldError shows Zod's defaults.
Which fields have helper text?
First name says Your legal first name., last name says Your legal last name. and email says Your primary email address. Street and city have no FieldDescription.
Related
- Form with Field GroupsA form split into Personal Information
- Nested FieldsA shipping address fieldset with a nested
- Vertical Layout (Default) FormA form with labels above their inputs and
- Grid Layout (2 Columns) FormA contact details form with six fields in
- Long Form with Many FieldsA nine-field registration form in three
- Accordion Form with Icon SectionsA form split into personal, contact and