shadcn.io is not affiliated with official shadcn/ui
Field examples · Layouts
Nested Fields for React
A shipping address fieldset with a nested group and a two-column row.
An address form with a hierarchy: Street Address with an apartment line nested under it, then City and ZIP Code side by side. A FieldSet with a FieldLegend and a FieldDescription holds it all, and a nested FieldGroup keeps the secondary line close to the street field.
Preview
Installation
FAQ
What is the Shipping Address line?
FieldLegend on FieldSet is the caption, in the default legend style. FieldDescription under it reads Where should we send your order?
How is the street field different from the apartment field?
Street Address is a Field in the outer FieldGroup. Apartment, suite, etc. sits in a second FieldGroup nested under that street field.
How do City and ZIP Code share a row?
They sit in a grid with grid-cols-2 and gap-4, still inside the outer FieldGroup. Placeholders are New York and 10001.
What do the inputs accept?
Every Input uses type text. Street's placeholder is 123 Main St, and the apartment placeholder is Apt 4B.
Related
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Grid Layout FieldPersonal details in a grid: two equal
- Mixed Orientations FieldA vertical input, a horizontal switch
- Accordion Form with Icon SectionsA form split into personal, contact and
- Standard DialogA share dialog with a read-only link, a
- Standard CardA basic card with a title, a description