shadcn.io is not affiliated with official shadcn/ui
Form examples · Layouts
Vertical Layout (Default) Form for React
A form with labels above their inputs and a description under each, for name, email and phone.
Labels above inputs are the default for a reason: they scan quickly and work at any width. Each Field stacks its FieldLabel, Input, FieldDescription and FieldError, and a FieldGroup spaces the three fields evenly in a max-w-md form. A Controller wires each input into React Hook Form and a Zod schema with custom messages checks name, email and phone on submit.
Preview
Installation
FAQ
How is the vertical stack built?
Field is vertical by default, so each one stacks its FieldLabel, Input, FieldDescription and FieldError. A FieldGroup spaces the three fields and the Submit row.
What does each field validate?
name is z.string().min(2, "Name must be at least 2 characters."), email is z.email("Please enter a valid email address.") and phone is z.string().min(10, "Please enter a valid phone number."). Phone is a length check, not a digit pattern.
Which input types are set?
Email sets type="email" and phone sets type="tel". Name stays a text input. Each FieldLabel points at its input's id, such as form-vertical-layout-default-phone.
What do the descriptions say?
Name says Your full name., email says Your email address. and phone says Your contact number. Each FieldDescription stays visible, and the FieldError appears under it when the field fails.
Related
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Horizontal Layout FormA form with each label beside its input
- Responsive Layout FormA form that stacks name, email, company
- Grid Layout (2 Columns) FormA contact details form with six fields in
- Three Field FormA three-field form with first and last
- Contact FormA contact form with name, email, a