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.

Source Theme Source @chakra-ui/drawer

Import#

import { Drawer } from '@chakra-ui/react'

Usage#

Basic Drawer#

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

  return (
    <>
      <Button ref={btnRef} colorPalette='teal' onClick={onOpen}>
        Open
      </Button>
      <Drawer
        open={open}
        placement='right'
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.CloseTrigger />
          <Drawer.Header>Create your account</Drawer.Header>

          <Drawer.Body>
            <Input placeholder='Type here...' />
          </Drawer.Body>

          <Drawer.Footer>
            <Button variant='outline' mr={3} onClick={onClose}>
              Cancel
            </Button>
            <Button colorPalette='blue'>Save</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </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.

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

  return (
    <>
      <RadioGroup.Root defaultValue={placement} onChange={setPlacement}>
        <Stack direction='row' mb='4'>
          <RadioGroup.Item value='top'>Top</RadioGroup.Item>
          <RadioGroup.Item value='right'>Right</RadioGroup.Item>
          <RadioGroup.Item value='bottom'>Bottom</RadioGroup.Item>
          <RadioGroup.Item value='left'>Left</RadioGroup.Item>
        </Stack>
      </RadioGroup.Root>
      <Button colorPalette='blue' onClick={onOpen}>
        Open
      </Button>
      <Drawer placement={placement} onClose={onClose} open={open}>
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.Header borderBottomWidth='1px'>Basic Drawer</Drawer.Header>
          <Drawer.Body>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Drawer.Body>
        </Drawer.Content>
      </Drawer>
    </>
  )
}

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 { open, onOpen, onClose } = useDisclosure()
  const firstField = React.useRef()

  return (
    <>
      <Button colorPalette='teal' onClick={onOpen}>
        <AddIcon />
        Create user
      </Button>
      <Drawer.Root
        open={open}
        placement='right'
        initialFocusRef={firstField}
        onClose={onClose}
      >
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.CloseTrigger />
          <Drawer.Header borderBottomWidth='1px'>
            Create a new account
          </Drawer.Header>

          <Drawer.Body>
            <Stack gap='24px'>
              <Box>
                <FormLabel htmlFor='username'>Name</FormLabel>
                <Input
                  ref={firstField}
                  id='username'
                  placeholder='Please enter user name'
                />
              </Box>

              <Box>
                <FormLabel htmlFor='url'>Url</FormLabel>
                <Group>
                  <InputAddon>http://</InputAddon>
                  <Input
                    type='url'
                    id='url'
                    placeholder='Please enter domain'
                  />
                  <InputAddon placement='end'>.com</InputAddon>
                </Group>
              </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>
          </Drawer.Body>

          <Drawer.Footer borderTopWidth='1px'>
            <Button variant='outline' mr={3} onClick={onClose}>
              Cancel
            </Button>
            <Button colorPalette='blue'>Submit</Button>
          </Drawer.Footer>
        </Drawer.Content>
      </Drawer.Root>
    </>
  )
}

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('')
  const { open, 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} open={open} size={size}>
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.CloseTrigger />
          <Drawer.Header>{`${size} drawer contents`}</Drawer.Header>
          <Drawer.Body>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Consequat nisl vel pretium lectus quam id. Semper quis lectus
              nulla at volutpat diam ut venenatis. Dolor morbi non arcu risus
              quis varius quam quisque. Massa ultricies mi quis hendrerit dolor
              magna eget est lorem. Erat imperdiet sed euismod nisi porta.
              Lectus vestibulum mattis ullamcorper velit.
            </p>
          </Drawer.Body>
        </Drawer.Content>
      </Drawer>
    </>
  )
}

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 { open, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open</Button>
      <Drawer open={open} onClose={onClose}>
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.CloseTrigger />
          <Drawer.Header>Create your account</Drawer.Header>

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

          <Drawer.Footer>
            <Button type='submit' form='my-form'>
              Save
            </Button>
          </Drawer.Footer>
        </Drawer.Content>
      </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.

Theming#

The Drawer component is a multipart component.

To learn more about styling multipart components, visit the Component Style page.

Anatomy#

A: header
B: overlay
C: dialogContainer
D: dialog
E: closeButton
F: body
G: footer

You can find more information in the source here.

Theming properties#

The properties that affect the theming of the Drawer component are:

variant: The visual variant of the Drawer. Defaults to baseStyle.
size: The size of the Drawer. Defaults to md.

Theming utilities#

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

Customizing the default theme#

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  overlay: {
    bg: 'blackAlpha.200', //change the background
  },
  dialog: {
    borderRadius: 'md',
    bg: `purple.100`,
  },
})

export const drawerTheme = defineMultiStyleConfig({
  baseStyle,
})

After customizing the drawer theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { drawerTheme } from './components/theme/drawer'

export const theme = extendTheme({
  components: { Drawer: drawerTheme },
})

This is a crucial step to make sure that any changes that we make to the Drawer theme are applied.

Adding a custom size#

Let's assume we want to change the font size of both header and dialog.

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import {
  createMultiStyleConfigHelpers,
  defineStyle,
} from '@chakra-ui/styled-system'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const xl = defineStyle({
  px: '6',
  py: '2',
  fontSize: 'xl',
})

const sm = defineStyle({
  fontSize: 'sm',
  py: '6',
})

const sizes = {
  xl: definePartsStyle({ header: sm, dialog: xl }),
}

export const drawerTheme = defineMultiStyleConfig({
  sizes,
})

// Now we can use the new `xl` size
<Drawer size="xl" ... />

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a custom variant. Here's how we can do that:

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const purple = definePartsStyle({
  dialog: {
    borderRadius: 'md',
    bg: `purple.100`,

    // Let's also provide dark mode alternatives
    _dark: {
      bg: `purple.600`,
      color: 'white',
    },
  },
})

export const drawerTheme = defineMultiStyleConfig({
  variants: { purple },
})

// Now we can use the new `purple` variant
<Drawer variant='purple' ... />

Changing the default properties#

Let's assume we want to change the default size and variant of every Drawer in our app.

import { drawerAnatomy as parts } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)

export const drawerTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'purple',
  },
})

// This saves you time, instead of manually setting the size and variant every time you use a Drawer:
<Drawer size="xl" variant="purple" ... />

Showcase#

import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
    useDisclosure,
    Button,
    Box,
    IconButton,
    useColorMode,
  } from "@chakra-ui/react";
  import { FaMoon, FaSun } from "react-icons/fa";
  
  
  export default function App() {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const { toggleColorMode, colorMode } = useColorMode();
  
    return (
        <Box position="relative" h="100vh" p={12}>
        <Button onClick={onOpen}>Open Drawer</Button>
  
        <Drawer isOpen={isOpen} onClose={onClose}>
          <DrawerOverlay />
          <DrawerContent>
            <DrawerHeader>Drawer Title</DrawerHeader>
            <DrawerCloseButton />
            <DrawerBody>
              Lorem ipsum dolor sit amet. Et corporis quisquam eum adipisci
              impedit quo eius nisi est aspernatur vel veniam velit qui numquam
              totam. Vel debitis sint ut culpa cupiditate a dolores voluptates ut
              vero voluptatem non rerum aliquid qui sapiente possimus. Eum natus
              voluptates hic galisum architecto et nobis incidunt ut odio ipsum
              qui repudiandae voluptatem.
            </DrawerBody>
  
            <DrawerFooter>
              <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
              </Button>
              <Button variant="ghost">Secondary Action</Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
        <IconButton
          aria-label="change theme"
          rounded="full"
          size="xs"
          position="absolute"
          bottom={4}
          left={4}
          onClick={toggleColorMode}
          icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
        />
      </Box>
    );
  }

Open Sandbox

Edit this page on GitHub