Modal Dialog

A dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.

🚨 Version (v1.0.0) introduced a breaking change to this component's API. Kindly update accordingly.

Import#

Rock UI exports 7 components to help you create any modal dialog.

  • Modal: The wrapper that provides context for its children
  • ModalOverlay: The dimmed overlay behind the modal dialog
  • ModalContent: The container for the modal dialog's content
  • ModalHeader: The header that labels the modal dialog
  • ModalFooter: The footer that houses the modal actions
  • ModalBody: The wrapper that houses the modal's main content
  • ModalCloseButton: The button that closes the modal.

Usage#

When the modal opens, focus is sent into the modal and set to the first tabbable element. If there are no tabbled elements, focus is set on ModalContent.

Editable Example

Control Focus when Modal closes#

When the dialog closes, it returns focus to the element that triggered it. Set finalFocusRef to change the element that should receive focus when the modal closes.

Some other content that'll receive focus on close.
Editable Example

Block Scrolling when Modal opens#

For accessibility, it's recommended to block scrolling on the main document behind the modal. Rock UI does this by default but you can set blockScrollOnMount to false to allow scrolling behind the modal.

Editable Example

Focus on specific element#

Rock UI automatically sets focus on the first tabbable element in the modal. However, there might be scenarios where you need to manually control where focus goes.

Rock UI provides 2 props for this use case:

  • initialFocusRef: The ref of the component that receives focus when the modal opens.
  • finalFocusRef: The ref of the component that receives focus when the modal closes.

If you set finalFocusRef, internally we set returnFocusOnClose to false so it doesn't return focus to the element that triggered it.

Editable Example

Close Modal on Overlay Click#

By default, the modal closes when you click its overlay. You can set closeOnOverlayClick to false if you want the modal to stay visible.

Editable Example

Make modal vertically centered#

By default the modal has a vertical offset of 3.75rem which you can change by passing top to the ModalContent. If you need to vertically center the modal, pass the isCentered prop.

If the content within the modal overflows beyond the viewport, don't use this prop. Try setting the overflow behavior instead.

Editable Example

Adding transitions#

The Modal doesn't come with any transitions by default so you can manage this yourself. Rock UI exports four transition components (Fade, ScaleFade, Slide, and SlideFade) to provide simple transitions.

When adding transitions, kindly pay attention to the timeout for the overlay and content transitions. In this example, Fade transitions slower than the SlideFade for it to work correctly.

Editable Example

If the content within the modal overflows beyond the viewport, you can use the scrollBehavior to control how scrolling should happen.

  • If set to inside, scroll only occurs within the ModalBody.
  • If set to outside, the entire ModalContent will scroll within the viewport.
Editable Example

Pass the size prop if you need to adjust the size of the modal. Values can be xs, sm, md, lg, xl, or full.

Editable Example

Making other elements Inert#

When the modal is open, it's rendered within a portal and all its siblings have aria-hidden set to true so the only thing screen readers see is the modal. To disable this behavior, set useInert to false.

Prevent focus trapping#

By default the modal, alert dialog and drawer locks the focus inside them. Normally this is what you want to maintain accessibility standards.

While strongly discourage this use case due to it's accessibility impacts, there are certain situations where you might not want the modal to trap focus.

To prevent focus trapping, pass trapFocus and set it's value to false.

Accessibility#

Keyboard and Focus Management#

  • When the modal opens, focus is trapped within it.
  • When the modal opens, focus is automatically set to the first enabled element, or the element from initialFocusRef.
  • When the modal closes, focus returns to the element that was focused before the modal activated, or the element from finalFocusRef.
  • Clicking on the overlay closes the Modal.
  • Pressing Esc closes the Modal.
  • Scrolling is blocked on the elements behind the modal.
  • The modal is rendered in a portal attached to the end of document.body to break it out of the source order and make it easy to add aria-hidden to its siblings.

ARIA#

  • The ModalContent has aria-modal set to true.
  • The ModalContent has aria-labelledby set to the id of the ModalHeader
  • The ModalContent has aria-describedby set to the id of the ModalBody

Props#

NameTypeDefaultDescription
isOpenbooleanIf true, the modal will open
onClose(event, reason) => voidCallback invoked to close the modal.
isCenteredbooleanIf true, the Modal will be centered on screen
initialFocusRefReact.RefThe least destructive action to get focus when dialog is open
finalFocusRefReact.RefThe least destructive action to get focus when dialog is closed
blockScrollOnMountbooleantrueIf true, scrolling will be disabled on the body when the modal opens.
useInertbooleantrueA11y: If true, the siblings of the Modal will have aria-hidden set to true so that screen readers can only see the Modal.
childrenReact.ReactNodeThe content of the modal.
sizeBoxProps["maxWidth"]mdThe size (maxWidth) of the modal.
scrollBehaviorinside, outsideoutsideWhere scroll behaviour should originate.
closeOnOverlayClickbooleantrueIf true, the modal will close when the overlay is clicked
returnFocusOnClosebooleantrueIf true, the modal will return focus to the element that triggered it when it closes.
closeOnEscbooleantrueIf true, the modal will close when the Esc key is pressed
trapFocusbooleantrueIf true, focus trapping will be disabled
autoFocusbooleantrueIf true, the modal moves focus to the first interactive element
idstringThe top-level id to use for the modal and it's sub-components
onOverlayClickfunctionFunction called when the overlay clicked
onEscfunctionFunction called when the Esc key is pressed

Other components#

  • ModalOverlay, ModalHeader, ModalFooter and ModalBody composes Box component
  • ModalCloseButton composes CloseButton
Edit this page

Made byChakraandRock Content