Skip to content

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

Free

Form with Labels Skeleton for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not submit the form.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

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