'use client'
import { Button, Card, Collapsible } from '@chakra-ui/react'
export const CollapsibleBasic = () => (
<Collapsible.Root>
<Collapsible.Trigger asChild>
<Button variant="ghost" mb="2">
Toggle Collapsible
</Button>
</Collapsible.Trigger>
<Collapsible.Content>
<Card.Root p="2" px="4" textStyle="sm">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</Card.Root>
</Collapsible.Content>
</Collapsible.Root>
)
Anatomy
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.
'use client';
import { Collapsible, Button, Card } from '@chakra-ui/react'
export const CollapsibleLazyMounted = () => (
<Collapsible.Root unmountOnExit>
<Collapsible.Trigger asChild>
<Button variant="ghost" mb="2">
Toggle Collapse (Unmount on exit)
</Button>
</Collapsible.Trigger>
<Collapsible.Content>
<Card.Root p="2" px="4" textStyle="sm">
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.
</Card.Root>
</Collapsible.Content>
</Collapsible.Root>
)
Props
Root
| Prop | Default | Type |
|---|---|---|
hideMode | ''display-none'' | HideModeHow to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+. |
lazyMount | false | booleanWhether to enable lazy mounting |
unmountOnExit | false | booleanWhether to unmount on exit. |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
collapsedHeight | string | numberThe height of the content when collapsed. | |
collapsedWidth | string | numberThe width of the content when collapsed. | |
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. |