Collapsible - Chakra Ui

Usage

jsx

import { Collapsible } from "@chakra-ui/react"

jsx

<Collapsible.Root>
  <Collapsible.Trigger>
    <Collapsible.Indicator />
  </Collapsible.Trigger>
  <Collapsible.Content />
</Collapsible.Root>

Examples

Initial Open

Use the defaultOpen prop to render the collapsible in an open state by default.

Partial Height

Use the collapsedHeight prop to show a preview of the content when collapsed.

Disabled

Use the disabled prop to prevent the collapsible from being toggled.

Controlled

Use the open and onOpenChange props to control the collapsible state.

Store

An alternative way to control the collapsible is to use the RootProvider component and the useCollapsible store hook.

Lazy Mounted

Use the unmountOnExit prop to make the content unmount when collapsed.

Guides

Accessing collapsible context

Use useCollapsibleContext to access the collapsible's state and methods from any component inside the collapsible.

tsx

import { useCollapsibleContext } from "@chakra-ui/react"

const CollapsibleStatus = () => {
  const collapsible = useCollapsibleContext()

  return <div>Collapsible is {collapsible.open ? "open" : "closed"}</div>
}

const MyCollapsible = () => (
  <Collapsible.Root>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>
      <CollapsibleStatus />
    </Collapsible.Content>
  </Collapsible.Root>
)

Closing programmatically

Use setOpen(false) from the context to close the collapsible programmatically.

tsx

import { useCollapsibleContext } from "@chakra-ui/react"

const CloseButton = () => {
  const collapsible = useCollapsibleContext()

  return (
    <Button onClick={() => collapsible.setOpen(false)}>
      Close Collapsible
    </Button>
  )
}

const MyCollapsible = () => (
  <Collapsible.Root>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>
      <CloseButton />
    </Collapsible.Content>
  </Collapsible.Root>
)

Content Padding

To prevent janky animations when the collapsible expands or collapses, apply padding to the inner content element rather than directly on Collapsible.Content to prevent visual stuttering as its animations.

DO THIS:

tsx

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>
    <Box padding="4" borderWidth="1px">
    </Box>
  </Collapsible.Content>
</Collapsible.Root>

NOT THIS:

tsx

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content padding="4" borderWidth="1px">
  </Collapsible.Content>
</Collapsible.Root>

Props

Root

Explorer

Explore the Collapsible component parts interactively. Click on parts in the sidebar to highlight them in the preview.