Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sheet examples · Form

Contact Form Sheet for React

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

Framework
UI library

A contact form that slides in from the right, so people can write to you from any page. Name, Email and Message each sit in a Field with their label, and Send Message ends the column. Put the fields in a form and send them to your support inbox.

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

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.

All 29 sheet examples