Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Requires JS
This component requires the dialog stimulus controller.
Caveats
When using as_child: true, it sanitizes the output of the child element's children with Rails sanitize helper.
To allow more tags or attributes, edit Base#sanitize_as_child according to your preference.
Anatomy
Dialog do |d|d.triggerd.content dod.header dod.titled.descriptionendd.footer dod.closeendendend
API Reference
Dialog
| Name | Type | Default |
|---|---|---|
open: | boolean | false |
| Controls whether the dialog is initially visible when rendered. When true, the dialog will be open on page load. | ||
attributes | keyword arguments | |
Dialog#trigger
| Name | Type | Default |
|---|---|---|
as_child: | boolean | false |
| When true, merges the trigger functionality with the child element instead of wrapping it in a div. Useful for styling custom trigger elements. | ||
attributes | keyword arguments | |
Dialog#content
| Name | Type | |
|---|---|---|
attributes | keyword arguments |
Dialog#header
| Name | Type | |
|---|---|---|
attributes | keyword arguments |
Dialog#title
| Name | Type | |
|---|---|---|
attributes | keyword arguments |
Dialog#description
| Name | Type | |
|---|---|---|
attributes | keyword arguments |
Dialog#footer
| Name | Type | |
|---|---|---|
attributes | keyword arguments |
Dialog#close
| Name | Type | Default |
|---|---|---|
as_child: | boolean | false |
| When true, merges the close functionality with the child element instead of rendering a default button. Useful for custom styled close buttons. | ||
attributes | keyword arguments | |
Keyboard Interactions
| Key | Description |
|---|---|
| Space | Opens/closes the dialog. |
| Enter | Opens/closes the dialog. |
| Tab | Moves focus to the next focusable element. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Esc | Closes the dialog and moves focus to trigger. |
Examples
On This Page