Component

Form dialog

Inline or fixed modal form surface inside a dimmed stage.

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

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

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

Wide

Wider modal for picker and upload compositions.
Render state

Error

Dialog with validation feedback.
Render state

Compact

Compact modal for a short bounded edit.
Render state

Success

Dialog with success feedback and attached artifacts.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
openbooleantrueControls whether the dialog renders.
presentation'inline' | 'fixed'inlineInline documentation stage or fixed viewport overlay.
measure'compact' | 'default' | 'wide'defaultDialog max-width preset.
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-Dialog form content.