Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Import#

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
} from '@chakra-ui/react'

Usage#

Basic Drawer#

Drawer placement#

The Drawer can appear from any edge of the screen. Pass the placement prop and set it to top, right, bottom, or left.

Focus on specific element#

When a form is in the drawer, you might need to set focus on a specific element when the drawer opens. Pass the initialFocusRef prop.

Without the initialFocusRef prop, the drawer will set focus on the first focusable element when it opens.

Drawer Widths#

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

Using a form in a Drawer#

If you need to put a form within the Drawer, you might need to use a form validation library like react-hook-form or formik. Here's the recommended way to do it:

Because the button is located outside the form, you can leverage its native HTML form attribute and refer to the id of the form.

export const App = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open</Button>
      <Drawer isOpen={isOpen} onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Create your account</DrawerHeader>


          <DrawerBody>
            <form
              id='my-form'
              onSubmit={(e) => {
                e.preventDefault()
                console.log('submitted')
              }}
            >
              <Input name='nickname' placeholder='Type here...' />
            </form>
          </DrawerBody>


          <DrawerFooter>
            <Button type='submit' form='my-form'>
              Save
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}

Accessibility#

  • When opening the Drawer, focus is trapped inside the Drawer.
  • By default, the drawer sets focus on the first focusable element. If the initialFocusRef prop is passed, the drawer sets focus on the element with the assigned ref.
  • After the drawer closes, it'll return focus to the element that triggered it.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by ▲ Vercel