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.
'use client'
import { Collapsible } from '@chakra-ui/react'
import { Button, Card } from '@saas-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>
)
import { Collapsible } from '@saas-ui/react/collapsible'<Collapsible.Root>
<Collapsible.Trigger />
<Collapsible.Content />
</Collapsible.Root>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.
'use client'
import { Collapsible } from '@chakra-ui/react'
import { Button, Card } from '@saas-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>
)
| 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 it is first rendered. Use when you do not need to control its open state. | |
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 | () => voidFunction called when the animation ends in the closed state. | |
onOpenChange | (details: OpenChangeDetails) => voidFunction called when the popup is opened | |
open | booleanWhether the collapsible is open |