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 { Button, Card, Collapsible } 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>
)
Anatomy
import { Collapsible } from '@saas-ui/react/collapsible'<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.
'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>
)
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. |