Skip to content

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

Free

Sheet with Action Buttons in Footer for React

A Create Task button opens a New Task sheet with name, assignee, and due date, plus Save Draft and Create Task.

The title is New Task. Task Name, Assignee, and Due Date are empty, and the date field is a date input. Save Draft is an outline button beside Create Task.

Use it when a form has two ways to finish. A Dialog is enough if those three fields should sit in the center. In React, Base UI does not save the draft.

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 />}>Create Task</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>New Task</SheetTitle>
      <SheetDescription>
        Create a new task and assign it to a team member
      </SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field>
        <FieldLabel htmlFor="task-name">Task Name</FieldLabel>
        <Input id="task-name" placeholder="Enter task name" type="text" />
      </Field>
      <Field>
        <FieldLabel htmlFor="task-assignee">Assignee</FieldLabel>
        <Input id="task-assignee" placeholder="Select assignee" type="text" />
      </Field>
      <Field>
        <FieldLabel htmlFor="task-due-date">Due Date</FieldLabel>
        <Input id="task-due-date" type="date" />
      </Field>
    </FieldGroup>
    <SheetFooter>
      <Button variant="outline">Save Draft</Button>
      <Button>Create Task</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

FAQ

Which fields does the task form have?

Task Name, Assignee and Due Date. Due Date uses type="date", so the browser shows its own date picker. Assignee is a text input here; a Combobox of team members fits better in a real app.

Do the buttons save anything?

Not in this demo: neither has a handler. Save the draft without closing, then create the task and close the sheet by controlling its open state: Pass open to Sheet; onOpenChange receives the next boolean.

How does the footer stay at the bottom?

SheetFooter takes the free space above it with mt-auto, so it sits at the bottom of the panel however short the form is.

How does Create Task open the sheet?

The button labeled Create Task 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 task 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 New Task, with Create a new task and assign it to a team member as the description.

API Reference

Sheet

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

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets htmlFor="task-name", htmlFor="task-assignee" and htmlFor="task-due-date". The rest is on the Field page.

Input

Sets id="task-name", placeholder="Enter task name", type="text", id="task-assignee", placeholder="Select assignee" and id="task-due-date". The rest is on the Input page.

All 29 sheet examples