shadcn.io is not affiliated with official shadcn/ui
Skeleton examples · Form
Multi-column Form Skeleton for React
A form placeholder with two rows of paired fields, a full-width field and a button.
A loading form in two columns: two rows of side-by-side label and input pairs, one field across the form, and a button. The pairs sit in a two-column grid; every block is a Skeleton.
Use it for checkout, sign-up or profile forms that put fields such as first and last name on one row.
Preview
Installation
FAQ
How is the form laid out?
A max-w-2xl column with gap-6. Two grid grid-cols-2 gap-4 rows, then one full-width field, then a button.
What is inside a grid cell?
flex flex-col gap-2: an h-4 label and an h-10 w-full control. The four labels are w-20, w-24, w-16 and w-20.
Which field spans the form?
The third field has no grid. Its label is h-4 w-16 and its control is h-10 w-full, so it sits under both columns.
How big is the button bar?
h-10 w-32, at the start of the column. The inputs above it are w-full inside their grid cells.
Related
- Input Fields SkeletonThree label and input placeholders
- Form with Labels SkeletonA bordered form placeholder with a
- Form with Sections SkeletonA form placeholder in two titled
- Search Form SkeletonA search placeholder with an input and a
- Input with LabelA text input with a label above it
- Standard CardA basic card with a title, a description