Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Form with Labels Skeleton for Ark UI

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

A bordered card holds a heading, a short description, two labeled fields, a taller block for a textarea, and a button across the form.

Use it for a contact form whose fields come from the server. Once the form is real and only submit is waiting, show a Spinner on the button. In React, Ark UI does not submit the form.

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

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div className="flex w-full max-w-md flex-col gap-6 rounded-md border p-6">
  <div className="flex flex-col gap-2">
    <Skeleton className="h-5 w-24" />
    <Skeleton className="h-3 w-48" />
  </div>
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-20" />
    <Skeleton className="h-10 w-full" />
  </div>
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-24" />
    <Skeleton className="h-10 w-full" />
  </div>
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-16" />
    <Skeleton className="h-24 w-full" />
  </div>
  <Skeleton className="h-10 w-full" />
</div>

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.

API Reference

Skeleton

No extra props in this demo. The rest is on the Skeleton page.

All 30 skeleton examples