Modal

A modal is a dialog that focuses the user's attention exclusively on an information via a window that is overlaid on primary content.

    SourceTheme Source@chakra-ui/modal

Props#

isOpenRequired

Description

If true, the modal will be open.

Type
boolean

onCloseRequired

Description

Callback invoked to close the modal.

Type
() => void

allowPinchZoom

Description

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.

Type
boolean
Default
false.

autoFocus

Description

If true, the modal will autofocus the first enabled and interactive element within the ModalContent

Type
boolean
Default
true

blockScrollOnMount

Description

If true, scrolling will be disabled on the body when the modal opens.

Type
boolean
Default
true

closeOnEsc

Description

If true, the modal will close when the Esc key is pressed

Type
boolean
Default
true

closeOnOverlayClick

Description

If true, the modal will close when the overlay is clicked

Type
boolean
Default
true

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"

finalFocusRef

Description

The ref of element to receive focus when the modal closes.

Type
RefObject<FocusableElement>

id

Description

The id of the modal

Type
string

initialFocusRef

Description

The ref of element to receive focus when the modal opens.

Type
RefObject<FocusableElement>

isCentered

Description

If true, the modal will be centered on screen.

Type
boolean
Default
false

lockFocusAcrossFrames

Description

Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe

Type
boolean
Default
false

motionPreset

Description

The transition that should be used for the modal

Type
MotionPreset
Default
scale

onCloseComplete

Description

Fires when all exiting nodes have completed animating out

Type
() => void

onEsc

Description

Callback fired when the escape key is pressed and focus is within modal

Type
() => void

onOverlayClick

Description

Callback fired when the overlay is clicked.

Type
() => void

portalProps

Description

Props to be forwarded to the portal component

Type
Pick< PortalProps, "appendToParentPortal" | "containerRef" >

preserveScrollBarGap

Description

If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

Type
boolean
Default
true

returnFocusOnClose

Description

If true, the modal will return focus to the element that triggered it when it closes.

Type
boolean
Default
true

scrollBehavior

Description

Where scroll behavior should originate. - If set to inside, scroll only occurs within the ModalBody. - If set to outside, the entire ModalContent will scroll within the viewport.

Type
ScrollBehavior
Default
outside

size

Description

The size of the Modal

Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"
Default
md

trapFocus

Description

If false, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. 🚨Warning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.

Type
boolean
Default
true

useInert

Description

A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**

Type
boolean
Default
true

variant

Description

The variant of the Modal

Type
string

Other components#

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

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel