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