Dialog
Markdown for agentsAccessible modal dialog with focus trapping, escape-to-close and focus restoration.
npx slipstream-ui@latest add dialogPlayground
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | required | Whether the dialog is visible (controlled) |
| onOpenChange | (open: boolean) => void | required | Open/close requests |
| title | string | required | Accessible dialog name |
| description | string | — | Optional supporting text |
| closeOnBackdrop | boolean | true | Backdrop click closes the dialog |
| initialFocusRef | RefObject<HTMLElement> | first focusable | Element focused on open |
Accessibility
- role=dialog with aria-modal, labelled by title and described by description
- Initial focus moves into the dialog and returns to the opener on close
- Tab and Shift+Tab wrap inside the dialog
- Escape closes the dialog