Skip to content

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

Free

Contact Form Sheet for Ark UI

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

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 React, Ark UI does not send the message.

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

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

Usage

<Sheet>
  <SheetTrigger asChild>
    <Button>Contact Us</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Contact Us</SheetTitle>
      <SheetDescription>
        Send us a message and we&apos;ll get back to you soon.
      </SheetDescription>
    </SheetHeader>
    <FieldGroup className="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 className="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 read details.open in onOpenChange.

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