shadcn.io is an independent project built on shadcn/ui
Shipping Address is the caption, then Where should we send your order? Street Address, placeholder 123 Main St, comes first. Apartment, suite, etc., placeholder Apt 4B, is nested under it. City and ZIP Code share the last row, New York and 10001.
Use it when a secondary line belongs under the field above it. A flat set of address Input fields skips that nesting. Ark UI in React does not look up the ZIP code.
Installation
Anatomy
Usage
<FieldSet className="w-full max-w-md">
<FieldLegend>Shipping Address</FieldLegend>
<FieldDescription>Where should we send your order?</FieldDescription>
<FieldGroup>
<Field>
<FieldLabel>Street Address</FieldLabel>
<Input placeholder="123 Main St" type="text" />
</Field>
<FieldGroup>
<Field>
<FieldLabel>Apartment, suite, etc.</FieldLabel>
<Input placeholder="Apt 4B" type="text" />
</Field>
</FieldGroup>
<div className="grid grid-cols-2 gap-4">
<Field>
<FieldLabel>City</FieldLabel>
<Input placeholder="New York" type="text" />
</Field>
<Field>
<FieldLabel>ZIP Code</FieldLabel>
<Input placeholder="10001" type="text" />
</Field>
</div>
</FieldGroup>
</FieldSet>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.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets placeholder="123 Main St", type="text", placeholder="Apt 4B", placeholder="New York" and placeholder="10001". The rest is on the Input page.
