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 React.
Installation
Anatomy
Usage
<FieldSet className="w-full max-w-md">
<FieldLegend variant="label">Personal Details</FieldLegend>
<FieldGroup>
<div className="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 className="grid grid-cols-3 gap-4">
<Field className="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.
