shadcn.io is not affiliated with official shadcn/ui
Field examples · Layouts
Vertical Layout (Default) Field for React
Two stacked fields, each with its label above and a description below.
Framework
UI library
The default layout: no orientation, so each Field stacks its label, its input and a FieldDescription. It reads top to bottom and works at any width.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
What makes this layout vertical?
Neither Field sets orientation, so both stay at the default vertical. The label stacks over the input, and FieldDescription follows the input.
What does each description say?
Name's description reads This will be displayed publicly. Email's description reads We'll never share your email.
What are the two inputs?
Name is type text with placeholder Your name. Email is type email with placeholder you@example.com.
How do the labels connect?
Each FieldLabel inside its Field names that input. The labels are Name and Email.
Related
- Horizontal Layout FieldAn input and a select, each with its
- Responsive Layout FieldTwo fields that stack in a narrow
- Grid Layout FieldPersonal details in a grid: two equal
- Mixed Orientations FieldA vertical input, a horizontal switch
- Simple Select FieldA country select with a label and a
- Input with LabelA text input with a label above it