Form dialog

Inline or fixed modal form surface using FormShell inside a dimmed stage.

Form dialog provides the constrained form surface. Product code owns focus trapping and portal strategy when using fixed presentation.

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

Centered modal form with text, choice, and footer actions.

Wide

Wider modal for picker and upload compositions.

Error

Dialog with validation feedback.

Props

Name	Type	Default	Description
`open`	`boolean`	`true`	Controls whether the dialog renders.
`presentation`	`'inline' \| 'fixed'`	`inline`	Inline documentation stage or fixed viewport overlay.
`size`	`'compact' \| 'default' \| 'wide'`	`default`	Dialog max-width preset.
`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`	-	Dialog form content.