Dialog

Overlays

Modal window with backdrop, focus trap, initial focus, focus restoration, scroll lock and Escape/backdrop dismissal. Compound parts or the controlled props work equally well.

import { Dialog } from "@componentforge/react";

Examples

Confirmation dialog

Focus lands on the first focusable element, Tab cycles inside, Escape/backdrop close and focus returns to the trigger.

Accessibility

role="dialog" with aria-modal="true"; labelled by Dialog.Title via aria-labelledby, described by Dialog.Description.
Initial focus goes to [data-autofocus], else the first focusable element, else the panel itself.
Tab/Shift+Tab are trapped inside the panel; on close, focus returns to the element that opened it.
Body scroll is locked while open (with scrollbar-width compensation to avoid layout shift).

Keyboard interactions

Key	Action
`Escape`	Close the dialog (respects preventDefault for nested layers).
`Tab / Shift+Tab`	Cycle focus within the panel.

API reference

Selected props — every component also spreads native HTML attributes.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial state.
onOpenChange	(open: boolean) => void	—	Called on Escape, backdrop click and Close presses in both modes.
Content.label	string	""	Accessible name when no Title part is rendered.