Skip to content

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

Free

Contact Form Sheet for React

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, Base 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 render={<Button />}>Contact Us</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 htmlFor="contact-name">Name</FieldLabel>
        <Input id="contact-name" placeholder="Enter your name" type="text" />
      </Field>
      <Field>
        <FieldLabel htmlFor="contact-email">Email</FieldLabel>
        <Input
          id="contact-email"
          placeholder="Enter your email"
          type="email"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="contact-message">Message</FieldLabel>
        <Input id="contact-message" 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; onOpenChange receives the next boolean.

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. The Button goes in the render prop of SheetTrigger, and the label stays its child.

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

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

Button

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

Field

Sets htmlFor="contact-name", htmlFor="contact-email" and htmlFor="contact-message". The rest is on the Field page.

Input

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

All 29 sheet examples