A dialog is a window overlaid on either the primary window or another dialog window. Contents behind a modal dialog are inert meaning that users cannot interact with content behind the dialog.
When the modal opens, focus is sent into the modal and set to the first tabbable
element. If there are no tabbled element, focus is set on the
Close Modal on Overlay Click
By default, the modal closes when you click it's overlay. You can set
false if you want the modal to stay visible.
Block Scrolling when Modal opens
For accessibility, it's recommended to block scrolling on the main document
behind the modal. Search.io does this by default but you can set
false to allow scrolling behind modal.
Center Modal Content
By default, the modal content is centered on screens. You can set
false if you want to keep the dialog on top of the page.
size prop if you need to adjust the size of the modal. Values can be any of the following:
Making other elements Inert
When the modal is open, it's rendered within a portal and all it's siblings have
aria-hidden set to
true so the only thing screen readers see is the modal.
To disable this behavior, set
Keyboard and Focus Management
- When the modal opens, focus is trapped within it.
- Clicking on the overlay closes the Modal.
- Pressing Esc closes the Modal.
- Scrolling is blocked on the elements behind the modal.
- The modal is portalled to the end of
document.bodyto break it out of the source order and make it easy to add
aria-hiddento its siblings.
aria-labelledbyset to the
aria-describedbyset to the
|onClose||Callback invoked to close the modal.|
|useInert||A11y: If |
|ariaLabelledby||ARIA label for the modal.|
|ariaDescribedby||ARIA description for the modal.|
|closeOnEsc||Is the modal closable when user press esc key.|
|closeOnOverlayClick||Is the modal closable when user click on overlay.|
|blockScroll||Whether to block scrolling when dialog is open.|
|center||Should the modal content be centered.|
|trapFocus||When the modal is open, trap focus within it.|
|container||The container where the portal will be rendered inside.|
|size||The width for the modal content.|
|onEscKeyDown||Callback fired when the escape key is pressed.|
|onOverlayClick||Callback fired when the overlay is clicked.|
|onAnimationEnd||Callback fired when the Modal has exited and the animation is finished.|
|zIndex||z-index of the modal.|