Sponsor

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.

Installation#

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

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

Usage#

Basic Drawer#

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader>Create your account</DrawerHeader>

            <DrawerBody>
              <Input placeholder="Type here..." />
            </DrawerBody>

            <DrawerFooter>
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button color="blue">Save</Button>
            </DrawerFooter>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()
  return (
    <>
      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader>Create your account</DrawerHeader>
            <DrawerBody>
              <Input placeholder="Type here..." />
            </DrawerBody>
            <DrawerFooter>
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button color="blue">Save</Button>
            </DrawerFooter>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

Editable Example

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.

Top

Right

Bottom

Left

function PlacementExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [placement, setPlacement] = React.useState("right")

  return (
    <>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack direction="row" mb="4">
          <Radio value="top">Top</Radio>
          <Radio value="right">Right</Radio>
          <Radio value="bottom">Bottom</Radio>
          <Radio value="left">Left</Radio>
        </Stack>
      </RadioGroup>
      <Button colorScheme="blue" onClick={onOpen}>
        Open
      </Button>
      <Drawer placement={placement} onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay>
          <DrawerContent>
            <DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader>
            <DrawerBody>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </DrawerBody>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

function PlacementExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [placement, setPlacement] = React.useState("right")
  return (
    <>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack direction="row" mb="4">
          <Radio value="top">Top</Radio>
          <Radio value="right">Right</Radio>
          <Radio value="bottom">Bottom</Radio>
          <Radio value="left">Left</Radio>
        </Stack>
      </RadioGroup>
      <Button colorScheme="blue" onClick={onOpen}>
        Open
      </Button>
      <Drawer placement={placement} onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay>
          <DrawerContent>
            <DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader>
            <DrawerBody>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </DrawerBody>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

Editable Example

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.

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const firstField = React.useRef()

  return (
    <>
      <Button leftIcon={<AddIcon />} colorScheme="teal" onClick={onOpen}>
        Create user
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        initialFocusRef={firstField}
        onClose={onClose}
      >
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader borderBottomWidth="1px">
              Create a new account
            </DrawerHeader>

            <DrawerBody>
              <Stack spacing="24px">
                <Box>
                  <FormLabel htmlFor="username">Name</FormLabel>
                  <Input
                    ref={firstField}
                    id="username"
                    placeholder="Please enter user name"
                  />
                </Box>

                <Box>
                  <FormLabel htmlFor="url">Url</FormLabel>
                  <InputGroup>
                    <InputLeftAddon>http://</InputLeftAddon>
                    <Input
                      type="url"
                      id="url"
                      placeholder="Please enter domain"
                    />
                    <InputRightAddon>.com</InputRightAddon>
                  </InputGroup>
                </Box>

                <Box>
                  <FormLabel htmlFor="owner">Select Owner</FormLabel>
                  <Select id="owner" defaultValue="segun">
                    <option value="segun">Segun Adebayo</option>
                    <option value="kola">Kola Tioluwani</option>
                  </Select>
                </Box>

                <Box>
                  <FormLabel htmlFor="desc">Description</FormLabel>
                  <Textarea id="desc" />
                </Box>
              </Stack>
            </DrawerBody>

            <DrawerFooter borderTopWidth="1px">
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme="blue">Submit</Button>
            </DrawerFooter>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const firstField = React.useRef()
  return (
    <>
      <Button leftIcon={<AddIcon />} colorScheme="teal" onClick={onOpen}>
        Create user
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        initialFocusRef={firstField}
        onClose={onClose}
      >
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader borderBottomWidth="1px">
              Create a new account
            </DrawerHeader>
            <DrawerBody>
              <Stack spacing="24px">
                <Box>
                  <FormLabel htmlFor="username">Name</FormLabel>
                  <Input
                    ref={firstField}
                    id="username"
                    placeholder="Please enter user name"
                  />
                </Box>
                <Box>
                  <FormLabel htmlFor="url">Url</FormLabel>
                  <InputGroup>
                    <InputLeftAddon>http://</InputLeftAddon>
                    <Input
                      type="url"
                      id="url"
                      placeholder="Please enter domain"
                    />
                    <InputRightAddon>.com</InputRightAddon>
                  </InputGroup>
                </Box>
                <Box>
                  <FormLabel htmlFor="owner">Select Owner</FormLabel>
                  <Select id="owner" defaultValue="segun">
                    <option value="segun">Segun Adebayo</option>
                    <option value="kola">Kola Tioluwani</option>
                  </Select>
                </Box>
                <Box>
                  <FormLabel htmlFor="desc">Description</FormLabel>
                  <Textarea id="desc" />
                </Box>
              </Stack>
            </DrawerBody>
            <DrawerFooter borderTopWidth="1px">
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme="blue">Submit</Button>
            </DrawerFooter>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

Editable Example

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.

function SizeExample() {
  const [size, setSize] = React.useState("md")
  const { isOpen, onOpen, onClose } = useDisclosure()

  const handleClick = (newSize) => {
    setSize(newSize)
    onOpen()
  }

  const sizes = ["xs", "sm", "md", "lg", "xl", "full"]

  return (
    <>
      {sizes.map((size) => (
        <Button
          onClick={() => handleClick(size)}
          key={size}
          m={4}
        >{`Open ${size} Drawer`}</Button>
      ))}

      <Drawer onClose={onClose} isOpen={isOpen} size={size}>
        <DrawerOverlay>
          <DrawerContent>
            <DrawerHeader>{`${size} drawer contents`}</DrawerHeader>
            <DrawerBody>
              {size === "full"
                ? `You're trapped 😆 , refresh the page to leave or press 'Esc' key.`
                : null}
            </DrawerBody>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

function SizeExample() {
  const [size, setSize] = React.useState("md")
  const { isOpen, onOpen, onClose } = useDisclosure()
  const handleClick = (newSize) => {
    setSize(newSize)
    onOpen()
  }
  const sizes = ["xs", "sm", "md", "lg", "xl", "full"]
  return (
    <>
      {sizes.map((size) => (
        <Button
          onClick={() => handleClick(size)}
          key={size}
          m={4}
        >{`Open ${size} Drawer`}</Button>
      ))}
      <Drawer onClose={onClose} isOpen={isOpen} size={size}>
        <DrawerOverlay>
          <DrawerContent>
            <DrawerHeader>{`${size} drawer contents`}</DrawerHeader>
            <DrawerBody>
              {size === "full"
                ? `You're trapped 😆 , refresh the page to leave or press 'Esc' key.`
                : null}
            </DrawerBody>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    </>
  )
}

Editable Example

Using a form in a Drawer#

If you need to put a form within the Drawer, you might need to use to 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 attrbute 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>
    </>
  )
}

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.

Props#

Drawer Props#

Drawer composes the Modal component with these extra props:

Name	Type	Description	Default
isOpen	`boolean`	If `true`, the modal when be opened.	-
onClose	`() => void`	Callback invoked to close the modal.	-
allowPinchZoom	`boolean`	Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to `false`.	-
autoFocus	`boolean`	If `true`, the modal will autofocus the first enabled and interactive element within the `ModalContent`	`true`
blockScrollOnMount	`boolean`	If `true`, scrolling will be disabled on the `body` when the modal opens.	`true`
closeOnEsc	`boolean`	If `true`, the modal will close when the `Esc` key is pressed	`true`
closeOnOverlayClick	`boolean`	If `true`, the modal will close when the overlay is clicked	`true`
colorScheme	`string`		-
finalFocusRef	`RefObject<FocusableElement>`	The `ref` of element to receive focus when the modal closes.	-
getContainer	`(() => HTMLElement \| null)`	Function that will be called to get the parent element that the modal will be attached to.	-
id	`string`	The `id` of the modal	-
initialFocusRef	`RefObject<FocusableElement>`	The `ref` of element to receive focus when the modal opens.	-
isCentered	`boolean`	If `true`, the modal will be centered on screen.	`false`
isFullHeight	`boolean`	If `true` and drawer's placement is `top` or `bottom`, the drawer will occupy the viewport height (100vh)	-
motionPreset	`"scale" \| "slideInBottom" \| "slideInRight"`	The transition that should be used for the modal	-
onEsc	`(() => void)`	Callback fired when the escape key is pressed and focus is within modal	-
onOverlayClick	`(() => void)`	Callback fired when the overlay is clicked.	-
orientation	`"horizontal" \| "vertical"`		-
placement	`"top" \| "right" \| "bottom" \| "left"`	The placement of the drawer	-
preserveScrollBarGap	`boolean`	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	-
returnFocusOnClose	`boolean`	If `true`, the modal will return focus to the element that triggered it when it closes.	`true`
scrollBehavior	`"inside" \| "outside"`	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.	`"outside"`
size	`string`		-
styleConfig	`Record<string, any>`		-
trapFocus	`boolean`	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.	`true`
useInert	`boolean`	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	`true`
variant	`string`		-

Other components#

DrawerOverlay, DrawerFooter, DrawerHeader and DrawerBody composes Box component
DrawerCloseButton composes CloseButton

Edit this page

Drawer

.css-12m0k8p{pointer-events:auto;}Installation.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}#

Usage#

Basic Drawer#

Drawer placement#

Focus on specific element#

Drawer Widths#

Using a form in a Drawer#

Accessibility#

Props#

Drawer Props#

Other components#

Installation#