Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Form

Input Fields Skeleton for React

Three label and input placeholders stacked for a simple form.

Framework
UI library

Three label and input pairs and nothing else: a short bar for each label and a taller full-width bar for each input. The blocks are Skeleton elements.

Use it inside a form's own layout while its fields load, with the bar heights matched to your inputs.

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

How are the three fields stacked?

flex w-full max-w-md flex-col gap-4. Each field is its own flex flex-col gap-2.

What size is a label bar?

h-4, at w-16, then w-20, then w-24. The three widths stand in for labels of different lengths.

What size is an input bar?

h-10 w-full under each label. Match h-10 to the control you render so the stack does not jump.

Why is the gap inside a field smaller than the gap between fields?

gap-2 pairs a label with its input. gap-4 on the outer column separates the three pairs.

Where does the pulse come from?

Skeleton adds animate-pulse and bg-muted, and sets data-slot="skeleton". The default radius comes from your style. Edit the skeleton file under components/ui to change the pulse.

Should the field bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the form is loading. Do not use the bars as the only loading message.

All 30 skeleton examples