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.
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">
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.
</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. |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
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. |