Collapsible

An interactive component that can be expanded or collapsed.

Content

Animation

You can use CSS animations to create smooth transitions for opening and closing the Collapsible content. Utilize the data-state attribute in combination with the --height CSS variable to animate the open and closed states.

@keyframes slideDown {
  from { height: 0; }
  to { height: var(--height); }
}

@keyframes slideUp {
  from { height: var(--height); }
  to { height: 0; }
}

[data-scope='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms;
}

[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
  animation: slideUp 200ms;
}

Examples

Learn how to use the Collapsible component in your project. Let’s examine the most basic example:

Events

You can listen for the onExitComplete event to know when the Collapsible.Content is no longer visible:

Lazy Mount

To delay the mounting of the Collapsible.Content, use the lazyMount prop:

Unmount on Exit

To remove the Collapsible.Content from the DOM when it is not visible, use the unmountOnExit prop:

Combining Lazy Mount and Unmount on Exit

Both lazyMount and unmountOnExit can be combined to ensure that the component is mounted only when the Collapsible is expanded and unmounted when it is collapsed:

API Reference

Root

PropTypeDefault
asChild
boolean
defaultOpen
boolean
dir
'rtl' | 'ltr'"ltr"
disabled
boolean
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string; content: string; trigger: string }>
lazyMount
booleanfalse
onExitComplete
() => void
onOpenChange
(details: OpenChangeDetails) => void
open
boolean
unmountOnExit
booleanfalse

Content

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean