Collapsible
Used to expand and collapse additional content.
AI TipWant to skip the docs? Use the MCP Server
Chakra UI 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.
Think of each component as a wheel in your app’s UI — smooth, connected, and full of potential. Build with harmony. Build withChakra UI.
Think of each component as a wheel in your app’s UI — smooth, connected, and full of potential. Build with harmony. Build withChakra UI.
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.
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.
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 | booleanWhether to enable lazy mounting |
unmountOnExit | false | booleanWhether to unmount on exit. |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
defaultOpen | booleanThe initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible. | |
disabled | booleanWhether the collapsible is disabled. | |
ids | Partial<{ root: string; content: string; trigger: string }>The ids of the elements in the collapsible. Useful for composition. | |
onExitComplete | VoidFunctionThe callback invoked when the exit animation completes. | |
onOpenChange | (details: OpenChangeDetails) => voidThe callback invoked when the open state changes. | |
open | booleanThe controlled open state of the collapsible. |