Form drawer

Inline or fixed side-sheet form surface for inspect-and-edit workflows.

Form drawer is for contextual editing beside dense product surfaces. It uses the same shell and row language as panels and dialogs.

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Default

Right-side drawer with settings rows.

Review

Drawer with validation and review actions.

Left

Left-side drawer variant for navigation-adjacent forms.

Props

Name	Type	Default	Description
`open`	`boolean`	`true`	Controls whether the drawer renders.
`presentation`	`'inline' \| 'fixed'`	`inline`	Inline documentation stage or fixed viewport overlay.
`side`	`'left' \| 'right'`	`right`	Drawer edge for fixed or inline stages.
`onOpenChange`	`(open: boolean) => void`	-	Close affordance callback.
`title *`	`ReactNode`	-	Primary form title rendered in the shell header.
`description`	`ReactNode`	-	Supporting copy below the title.
`footer`	`ReactNode`	-	Footer action slot, usually cancel and submit buttons.
`status`	`'default' \| 'error' \| 'success'`	`default`	Outer status border treatment.
`children`	`ReactNode`	-	Drawer form content.