Skip to content

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

Free

Contact Form Sheet for Vue

A Contact Us button opens a right-side sheet with name, email, and message fields and a Send Message button.

UI library: Ark UI

Contact Us is both the button and the title. The description offers to write back. Name, Email, and Message are empty, and Send Message sits under them.

Use it so people can write in without leaving the page. A Popover is lighter for a one-line note. In Vue, Ark UI does not send the message.

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

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger :asChild="true"><Button>Contact Us</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Contact Us</SheetTitle>
      <SheetDescription>
        Send us a message and we'll get back to you soon.
      </SheetDescription>
    </SheetHeader>
    <FieldGroup class="gap-4 p-4">
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Input placeholder="Enter your name" type="text" />
      </Field>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input placeholder="Enter your email" type="email" />
      </Field>
      <Field>
        <FieldLabel>Message</FieldLabel>
        <Input placeholder="Your message" type="text" />
      </Field>
      <Button class="w-full">Send Message</Button>
    </FieldGroup>
  </SheetContent>
</Sheet>

FAQ

Which fields does the form have?

Name, Email and Message, each an input with a placeholder. Email uses type="email", so phones show the email keyboard. For long messages, swap the Message input for a Textarea.

Does Send Message submit anything?

Not yet: the fields aren't in a form and the button has no handler. Wrap the FieldGroup in a form with an onSubmit, and give the button type="submit".

How do I close the sheet after sending?

Control the open state and set it to false once the message is sent: Pass open to Sheet and listen to @open-change, which receives details.open.

How are the labels tied to the inputs?

Each label and input share a Field, so clicking Name focuses the name input and screen readers announce the label with it.

How does Contact Us open the sheet?

The button labeled Contact Us is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

What does the contact sheet announce?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Contact Us, with Send us a message and we'll get back to you soon as the description.

API Reference

Sheet

Sets asChild. The rest is on the Sheet page.

Button

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

Field

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

Input

Sets placeholder="Enter your name", type="text", placeholder="Enter your email", type="email" and placeholder="Your message". The rest is on the Input page.

All 29 sheet examples