shadcn.io is an independent project built on shadcn/ui
Address Information is the caption. Under it: We need your address to deliver your order. Street Address is its own row, placeholder 123 Main St. City and Postal Code share the next row, New York and 90502.
Put it on a few related inputs that need one name. A frame with no legend is a Card. Base UI in React does not check the postal code.
Installation
Anatomy
Usage
<FieldSet className="w-full max-w-md">
<FieldLegend>Address Information</FieldLegend>
<FieldDescription>
We need your address to deliver your order.
</FieldDescription>
<FieldGroup>
<Field>
<FieldLabel htmlFor="address-street-address">Street Address</FieldLabel>
<Input
id="address-street-address"
placeholder="123 Main St"
type="text"
/>
</Field>
<div className="grid grid-cols-2 gap-4">
<Field>
<FieldLabel htmlFor="address-city">City</FieldLabel>
<Input id="address-city" placeholder="New York" type="text" />
</Field>
<Field>
<FieldLabel htmlFor="address-postal-code">Postal Code</FieldLabel>
<Input id="address-postal-code" placeholder="90502" type="text" />
</Field>
</div>
</FieldGroup>
</FieldSet>FAQ
What is the Address Information line?
FieldLegend on FieldSet is the caption. variant is left unset, so it uses the default legend style. The legend is announced with each field's own label.
Where is the delivery sentence?
FieldDescription sits under the legend, on the set: We need your address to deliver your order. The inputs have their own labels under that.
How is the street field laid out?
Street Address is a full-width Field in the FieldGroup. type is text, and the placeholder is 123 Main St.
How do City and Postal Code share a row?
They sit in a grid with grid-cols-2 and gap-4. Placeholders are New York and 90502, and both inputs use type text.
API Reference
Field
Sets htmlFor="address-street-address", htmlFor="address-city" and htmlFor="address-postal-code". The rest is on the Field page.
Input
Sets id="address-street-address", placeholder="123 Main St", type="text", id="address-city", placeholder="New York" and id="address-postal-code". The rest is on the Input page.
