Component

Form drawer

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

Form drawer is for contextual editing beside dense product surfaces. Compose rows and sections with FieldRow, Section, and explicit controls.
layout
DOM renderImage render
Form drawerDefault

Playground

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

Loading playground

Rendered matrix

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

Default

Right-side drawer with settings rows.
Render state

Review

Drawer with validation and review actions.
Render state

Left

Left-side drawer placement for navigation-adjacent forms.
Render state

Compact

Compact drawer for fast policy edits.
Render state

Success

Drawer with successful policy validation.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
openbooleantrueControls whether the drawer renders.
presentation'inline' | 'fixed'inlineInline documentation stage or fixed viewport overlay.
side'left' | 'right'rightDrawer edge for fixed or inline stages.
onOpenChange(open: boolean) => void-Close affordance callback.
title *ReactNode-Primary form title rendered in the shell header.
descriptionReactNode-Supporting copy below the title.
footerReactNode-Footer action slot, usually cancel and submit buttons.
status'default' | 'error' | 'success'defaultOuter status border treatment.
childrenReactNode-Drawer form content.