shadcn.io is an independent project built on shadcn/ui
Personal Details is the caption. First Name and Last Name share a row, placeholders John and Doe. City, placeholder New York, takes two columns. State, placeholder NY, takes one.
Save it for neighbors that should share a row, with one wider than the other. A loose frame around the same fields is a Card. Column sizes are not something Ark UI figures out on Svelte.
Installation
Anatomy
Usage
<FieldSet class="w-full max-w-md"><FieldLegend variant="label">Personal Details</FieldLegend><FieldGroup><div class="grid grid-cols-2 gap-4"><Field><FieldLabel>First Name</FieldLabel><Input placeholder="John" type="text" /></Field><Field><FieldLabel>Last Name</FieldLabel><Input placeholder="Doe" type="text" /></Field></div><div class="grid grid-cols-3 gap-4"><Field class="col-span-2"><FieldLabel>City</FieldLabel><Input placeholder="New York" type="text" /></Field><Field><FieldLabel>State</FieldLabel><Input placeholder="NY" type="text" /></Field></div></FieldGroup></FieldSet>FAQ
How are First Name and Last Name placed on one row?
They sit in a grid with grid-cols-2 and gap-4. Each cell is its own Field with a FieldLabel and an Input.
How does City take more room than State?
That row is a grid with grid-cols-3 and gap-4. City's Field has col-span-2, so State keeps the last column.
What is the Personal Details line?
FieldLegend with variant set to label is the caption on the FieldSet. label is the quieter legend. This set has no FieldDescription.
What do the inputs accept?
Every Input uses type text. The placeholders are John, Doe, New York, and NY.
API Reference
Field
Sets variant="label". The rest is on the Field page.
Input
Sets placeholder="John", type="text", placeholder="Doe", placeholder="New York" and placeholder="NY". The rest is on the Input page.
