Collapsible

Used to expand and collapse additional content.

AI TipWant to skip the docs? Use the MCP Server

import { Box, Collapsible } from "@chakra-ui/react"  export const CollapsibleBasic = () => (  <Collapsible.Root>  <Collapsible.Trigger paddingY="3">Toggle Collapsible</Collapsible.Trigger>  <Collapsible.Content>  <Box padding="4" borderWidth="1px">  <strong>Chakra UI</strong> embraces this philosophy in the world of  design and development. Just like chakras align energy in the body,  Chakra UI aligns your design system — bringing flow, consistency, and  peace of mind to your codebase. It helps developers focus on creating  beautiful, accessible UIs without friction.  <br />  <br />  Think of each component as a wheel in your app’s UI — smooth, connected,  and full of potential. Build with harmony. Build with  <strong>Chakra UI</strong>.  </Box>  </Collapsible.Content>  </Collapsible.Root> )

Usage

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

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

Examples

Lazy Mounted

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

import { Box, Collapsible } from "@chakra-ui/react"  export const CollapsibleLazyMounted = () => (  <Collapsible.Root unmountOnExit>  <Collapsible.Trigger paddingY="3">  Toggle Collapse (Unmount on exit)  </Collapsible.Trigger>  <Collapsible.Content>  <Box padding="4" borderWidth="1px">  If you inspect the DOM, you'll notice that the content is unmounted when  collapsed. This is useful for performance reasons when you have a lot of  collapsible content.  </Box>  </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.
`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

root

trigger

content

indicator

collapsible.recipe.ts

Breadcrumb

Pagination