Skip to content

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

Free

Multi-Step Form Sheet for Solid

A Start Setup button opens Account Setup on step 1 of 3, with first name, last name, phone, Back, and Next.

UI library: Ark UI

The title is Account Setup. The description reads Step 1 of 3: Personal Information. First Name, Last Name, and Phone Number are empty. Back and Next fill the footer.

Use it for a setup that is too long for one view. These buttons do not change the step, so track it yourself, and show the sequence with Steps. In Solid, Ark UI does not keep the answers.

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={props => <Button {...props()}>Start Setup</Button>} />
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Account Setup</SheetTitle>
        <SheetDescription>Step 1 of 3: Personal Information</SheetDescription>
      </SheetHeader>
      <FieldGroup class="gap-4 p-4">
        <Field>
          <FieldLabel>First Name</FieldLabel>
          <Input placeholder="Enter first name" type="text" />
        </Field>
        <Field>
          <FieldLabel>Last Name</FieldLabel>
          <Input placeholder="Enter last name" type="text" />
        </Field>
        <Field>
          <FieldLabel>Phone Number</FieldLabel>
          <Input placeholder="Enter phone number" type="tel" />
        </Field>
      </FieldGroup>
      <SheetFooter>
        <Button class="w-full" variant="outline">
          Back
        </Button>
        <Button class="w-full">Next</Button>
      </SheetFooter>
    </SheetContent>
  </Sheet>

FAQ

How does the sheet show the current step?

In SheetDescription, which reads Step 1 of 3: Personal Information. Change that text with the step so screen readers hear it when the sheet opens.

What does step 1 collect?

First Name, Last Name and Phone Number. The phone input uses type="tel", so phones show the number pad.

Do Back and Next change the step?

Not in this demo: both are plain Buttons. Keep the step number in state, render that step's fields, and disable Back on the first step.

Where do the answers go between steps?

Keep them in one object in state, or in a form library, outside the step's fields. Otherwise unmounting a step loses what was typed.

How does Start Setup open the sheet?

The button labeled Start Setup is the trigger, and its text is the accessible name. asChild on SheetTrigger receives props: spread them onto the button.

What does the setup 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 Account Setup, and the description gives the step.

API Reference

Sheet

Sets asChild and props. The rest is on the Sheet page.

Button

Sets props and variant="outline". 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 first name", type="text", placeholder="Enter last name", placeholder="Enter phone number" and type="tel". The rest is on the Input page.

All 29 sheet examples