Skip to main content

BriteFormDialog

Sharedcomponent✓ stamped

Modal form dialog — dialog shell + react-hook-form fields.

@brite-nites/design-system/primitives/brite-form-dialog

Shell around Dialog + react-hook-form. Overlay is scoped to the canvas marked [data-dialog-root] so the side nav stays interactive. Frosted-glass backdrop. Modal caps at 90% of the canvas; title + footer stay pinned while description + fields scroll inside the body.

Basic

Title + two fields + cancel/save.

With description

Description lives inside the scrollable body so long context text scrolls naturally once the modal hits its height cap.

Scrolling body

Long forms: description + many fields exceed the 90% cap. The body scrolls; header and footer stay pinned.

Loading state

Passing submitting={true} disables both buttons, swaps the submit label for a spinner, and blocks dismissal via backdrop/Escape until the parent resets it. Simulated 2.2s request.

Footer aside

Secondary actions live on the left side of the footer via the footerAside prop. Typical use: an edit dialog that also exposes Delete.

Destructive — confirmation

Destructive actions render as a pure confirmation (BriteConfirmDialog) — no form fields, just a message. Use when the action is irreversible and needs explicit acknowledgement.

Neutral confirmation

Same shape, but neutral tone for non-destructive confirmations (archive, revert, discard draft).

Sizes

Four width presets. Choose based on field count + input width, not content length. Default is md (440px).

sm — 360pxMinimal, 1–2 fields
md — 440px (default)2–4 fields
lg — 520pxProperty / appointment
xl — 640pxDense config / 2-column