Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Form

Form with Labels Skeleton for React

A bordered form placeholder with a heading, two fields, a textarea and a full-width button.

Framework
UI library

A loading form in a bordered card: a heading and a short description, two label and input pairs, a taller block for a textarea, and a button across the form. Every block is a Skeleton.

Use it for contact or feedback forms whose fields come from the server.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What wraps this form?

flex w-full max-w-md flex-col gap-6 rounded-md border p-6. A heading, three fields and a button stack with gap-6.

What is the heading pair?

h-5 w-24 over h-3 w-48, in a column with gap-2. That pair is the form title and the short description.

How is a field drawn?

Each field is flex flex-col gap-2. The label is h-4 at w-20, w-24 or w-16. The control is h-10 w-full. The third control is h-24 w-full, the multiline bar.

How wide is the button bar?

h-10 w-full, the last child, so it spans the form. Match h-10 and h-24 to the controls you render, or the card shifts when they arrive.

Can I change the gray of these bars?

The fill is bg-muted on Skeleton, with animate-pulse. Edit the skeleton file under components/ui to change it. Each bar still sets its own height, width and radius.

Should the form skeleton be announced?

Set aria-hidden on the bars when a status already says the form is loading. The placeholders are decorative, and the status should carry the message.

All 30 skeleton examples