shadcn.io is not affiliated with official shadcn/ui
Field examples · Layouts
Grid Layout Field for React
Personal details in a grid: two equal columns, then a wide city field beside a narrow state field.
Put fields that belong together on one row and size each to its content. Inside a FieldSet, a two-column grid pairs First Name and Last Name, and a three-column grid gives City two columns and State one. Each cell is an ordinary Field, so labels and spacing stay consistent.
Preview
Installation
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.
Related
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Nested FieldsA shipping address fieldset with a nested
- Mixed Orientations FieldA vertical input, a horizontal switch
- Multiple Selects FieldLanguage and currency selects stacked in
- Basic Data Table with CheckboxesA table of products with a checkbox on
- Standard CardA basic card with a title, a description