Collapsible

Used to expand and collapse additional content.

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<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.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

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.

Status: Closed

Store

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

State: Collapsed

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.

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.

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:

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

NOT THIS:

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  {/* ❌ Avoid applying padding directly to Content */}
  <Collapsible.Content padding="4" borderWidth="1px">
    {/* Content here */}
  </Collapsible.Content>
</Collapsible.Root>

Props

Root

Prop	Default	Type
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`collapsedHeight`		`string \| number` The height of the content when collapsed.
`collapsedWidth`		`string \| number` The width of the content when collapsed.
`defaultOpen`		`boolean` The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`disabled`		`boolean` Whether the collapsible is disabled.
`ids`		`Partial<{ root: string; content: string; trigger: string }>` The ids of the elements in the collapsible. Useful for composition.
`onExitComplete`		`VoidFunction` The callback invoked when the exit animation completes.
`onOpenChange`		`(details: OpenChangeDetails) => void` The callback invoked when the open state changes.
`open`		`boolean` The controlled open state of the collapsible.

Explorer

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

Component Anatomy

Hover to highlight, click to select parts

collapsible-initial-open.recipe.ts

Carousel

Pagination

Collapsible

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Component Anatomy

Usage