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. Ark UI in Svelte does not check the postal code.
Installation
Anatomy
Usage
<FieldSet class="w-full max-w-md"><FieldLegend>Address Information</FieldLegend><FieldDescription>We need your address to deliver your order.</FieldDescription><FieldGroup><Field><FieldLabel>Street Address</FieldLabel><Input placeholder="123 Main St" type="text" /></Field><div class="grid grid-cols-2 gap-4"><Field><FieldLabel>City</FieldLabel><Input placeholder="New York" type="text" /></Field><Field><FieldLabel>Postal Code</FieldLabel><Input 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
No extra props in this demo. The rest is on the Field page.
Input
Sets placeholder="123 Main St", type="text", placeholder="New York" and placeholder="90502". The rest is on the Input page.
