FormSheet

A convenience wrapper around Sheet that provides a standard slide-out panel with title, description, and optional pinned footer. Reduces boilerplate for the common "open a side panel with a form" pattern.

Interactive example#

Form Sheet · Live example

Saved workspace: Studio

Open the form sheet, edit the name, and save to update the workspace.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Usage#

TSX

import { FormSheet, Button, Input, Label } from '@clidey/ux';

function CreateProjectPanel() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>New project</Button>
      <FormSheet
        open={open}
        onClose={() => setOpen(false)}
        title="Create project"
        description="Fill in the details."
        footer={<Button className="w-full">Create</Button>}
      >
        <div className="space-y-4 py-4">
          <Label>Name</Label>
          <Input placeholder="My project" />
        </div>
      </FormSheet>
    </>
  );
}

Props#

Prop	Type	Default	Description
`open`	`boolean`	—	Required. Whether the sheet is open
`onClose`	`() => void`	—	Required. Called when the sheet should close
`title`	`string`	—	Required. Sheet heading
`description`	`string`	—	Optional subheading below the title
`children`	`ReactNode`	—	Form content (scrollable)
`side`	`"right" \| "left" \| "top" \| "bottom"`	`"right"`	Which edge the sheet slides from
`className`	`string`	`"w-full sm:max-w-lg..."`	Override SheetContent classes
`footer`	`ReactNode`	—	Pinned content at the bottom (outside scroll area)

Note

The footer prop renders below the scrollable content area. Use it for action buttons (Save, Cancel) that should always be visible regardless of scroll position.

Was this page helpful?