shadcn.io is not affiliated with official shadcn/ui
Skeleton examples · Form
Form with Sections Skeleton for React
A form placeholder in two titled sections, each with a rule along its edge and two fields.
A loading form split into sections: each one has a title, then two label and input pairs set off by a rule along their start edge, and a button closes the form. The rule is a border on the field stack; the blocks are Skeleton elements.
Use it for settings or sign-up forms grouped into parts.
Preview
Installation
FAQ
How are the two sections stacked?
A max-w-lg column with gap-8. Each section is a gap-4 column: an h-5 title, then the fields. A h-10 w-32 button sits under both sections.
What is the line along the fields?
border-s-2 ps-4 on the field stack. The rule sits on the start edge, and ps-4 insets the fields. Titles are h-5 w-40 and h-5 w-32, outside that border.
What is inside a section?
Two fields, each flex flex-col gap-2. Labels are h-4 at w-20, w-24, w-16 and w-20. Every control is h-10 w-full. The sections stack those fields with gap-4.
Why is the button w-32?
h-10 w-32 sizes the bar to a short label, and it sits at the start of the column. The fields above it are w-full.
Related
- Form with Labels SkeletonA bordered form placeholder with a
- Multi-column Form SkeletonA form placeholder with two rows of
- Input Fields SkeletonThree label and input placeholders
- Accordion Form with Icon SectionsA form split into personal, contact and
- Search Form SkeletonA search placeholder with an input and a
- Standard CardA basic card with a title, a description