Modals have a few key characteristics: they are usually centered and overlay the primary content. This overlay, often a semi-transparent "dim" or "fade" of the background content, helps draw attention to the modal. They block interaction with the rest of the application. The user must interact with the modal (e.g., close it, fill out a form, etc.) before they can return to the rest of the application. They are a separate "mode" that requires an explicit user action to enter and exit, hence the term "modal".
Chakra UI's implementation of modals has several features that make it useful:
The following are the various components that comprise Chakra's modal system:
Modal: This is the main component that contains all the other modal components. It's responsible for controlling the state of the modal (whether it's open or not) and providing context to its child components.
ModalOverlay: This is a semi-transparent layer that covers the page content when the modal is open. It's often used to focus the user's attention on the modal by obscuring the rest of the page.
ModalContent: This component houses the actual content of the modal. It can contain any number of other components, such as text, forms, images, and more.
ModalHeader: This component is typically used to give a title or a brief description of the modal's purpose. It's placed at the top of the ModalContent.
ModalFooter: This is placed at the bottom of the ModalContent and is typically used to house the action buttons for the modal, such as "Save" or "Cancel" buttons. The placement of these actions in a consistent location helps users predict where they will be across different modals.
ModalBody: This is where the main content for the modal resides. It's located within the ModalContent, usually between the ModalHeader and the ModalFooter. It can contain text, forms, images, or other components, depending on the purpose of the modal.
ModalCloseButton: This is a specialized button designed for closing the modal. It's usually placed at the top-right corner of the ModalContent, allowing users to easily close the modal if they wish to dismiss it.
These components can be imported as follows:
When the modal is opened, the focus is trapped within the modal, and it's set to the first tabbable element, enhancing accessibility. Users cannot interact with the content behind the modal until the modal is closed, either by clicking on the "Dismiss" button or the close button at the top.
Focus Control Upon Closure
We do this by passing endRef to the finalFocusRef prop of the Modalcomponent. The finalFocusRef is a useful feature of Chakra UI's Modal that allows developers to control which element should receive focus when the modal closes. This is particularly useful for accessibility reasons, guiding the user's focus to a relevant place after they have completed their interaction with the modal.
In this particular example, the different content is a Box component that receives the focus after the modal closes. We indicate this using aria-label attribute on the Box. As with all Chakra UI components, you can customize and extend these as needed. For example, we've changed the color scheme of the close button to purple and added an additional button in the footer for another action.
Establish Initial Focus
In this example, the initialFocusRef prop is passed to the Modalcomponent and is set to startRef. This means that when the modal opens, the initial focus is set on the first Input field (for "First Name").
The finalFocusRef prop is set to endRef, so after the modal closes, the focus will move to the second button "Focus will move here when modal closes". This is important for accessibility and user experience, especially when there are multiple interactive elements on the page.
The following example also shows how to use Chakra UI's FormControl, FormLabel, and Input components to create a form within a modal dialog. The form takes user input for a first and last name, making this a practical example for a user registration or profile creation scenario. As with all Chakra UI components, you can customize and extend these as needed. For example, we've changed the color scheme of the submit button to green and updated the dismiss button text.
In this example, the JokesModal function component displays a button. Clicking this button opens a modal containing a set of one-liner jokes. The modal utilizes the slideInBottom transition, providing a sliding animation from the bottom of the screen.
Customizing the Backdrop
Please take note that the backdrop-filter CSS property might not be supported across all browsers. Hence, in the following example, certain features might not be fully functional on some browsers.
Also, since the Modal is rendered within a Portal, the filter property will not impact the background. This implies that you can only use this property to style components within the Modal.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3