Drawer

Drawer offers a way to show some information without creating a dedicated page for it. Usually used for showing information related to each row in a table, while staying on the same page.

#Import

The drawer may be composed of the following four components.

• Drawer: The outer drawer section.
• DrawerHeader: The drawer's header.
• DrawerBody: The drawer's body.
• DrawerFooter: The drawer's footer.

#Example

#Usage

#Use inert

Set useInert={false}, trapFocus={false}, and blockBackgroundInteraction={false} when users need to interact with adjacent content, such as a chat panel. Set contentWrapperStyles={{ "aria-modal": false }} to identify the drawer as nonmodal. Reserve space for adjacent content, move focus into the drawer when it opens, and return focus to its trigger when it closes; useInert defaults to true.

#Guidelines

#When to use

• To display information that doesn't have a dedicated page where it's displayed.

#When not to use

• When creating a resource. Use the WizardDrawer to create a resource in a drawer.

#Drawer props

Name	Default	Description
blockBackgroundInteraction	true	booleanShow an overlay and block app interaction.
closeOnOverlayClick	true	booleanClose drawer on overlay click.
contentWrapperStyles	—	Omit< | ChakraBoxProps, | "direction" | "style" | keyof ColorProps | keyof BackgroundProps | keyof BorderProps | > & | ColorProps & | BackgroundProps & | BorderProps & { | surface?: Surface; | style?: ChakraBoxProps["style"]; | }Drawer content
containerStyles	—	Omit< | ChakraBoxProps, | "direction" | "style" | keyof ColorProps | keyof BackgroundProps | keyof BorderProps | > & | ColorProps & | BackgroundProps & | BorderProps & { | surface?: Surface; | style?: ChakraBoxProps["style"]; | }Styles for the fixed, full-viewport container around the drawer content.
isOpen	false	booleanDetermines if drawer is open.
children	—	ReactNodeDrawer content. The common pattern is DrawerHeader, DrawerBody, and DrawerFooter.
closeOnEsc	true	booleanClose drawer on escape key press.
initialFocusRef	—	RefObject<HTMLElement>Ref to the element that should receive focus when the drawer opens.
placement	—	ChakraDrawerProps["placement"]The drawer's placement.
size	"lg"	"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"Drawer size.
trapFocus	false	booleanTrap focus within drawer.
useInert	true	ChakraDrawerProps["useInert"]Whether content outside the drawer is hidden from assistive technology.
showOverlay	false	booleanRender overlay.
onClose	—	() => voidCallback invoked to close the modal.