Collapsible

An interactive component that can be expanded or collapsed.

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='collapsible'][data-part='content'][data-state='open'] {
  animation: slideDown 250ms;
}

[data-scope='collapsible'][data-part='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

Example not found

Example not found

Example not found

Example not found

Disabled

Use the disabled prop to disable the collapsible and prevent it from being toggled.

Example not found

Example not found

Example not found

Example not found

Partial Collapse

Use the collapsedHeight or collapsedWidth props to create a "show more/less" pattern. When set, the content maintains the specified dimensions when collapsed instead of collapsing to 0px.

We expose the --collapsed-height or --collapsed-width variables to use in your CSS animations.

Example not found

Example not found

Example not found

Example not found

Interactive elements (links, buttons, inputs) within the collapsed area automatically become inert to prevent keyboard navigation to hidden content.

Nested Collapsibles

You can nest collapsibles within collapsibles to create hierarchical content structures.

Example not found

Example not found

Example not found

Example not found

Events

Use onExitComplete callback to listen for when the Collapsible.Content is no longer visible

Example not found

Example not found

Example not found

Example not found

Lazy Mount

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

Example not found

Example not found

Example not found

Example not found

Unmount on Exit

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

Example not found

Example not found

Example not found

Example not found

Lazy Mount + 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:

Example not found

Example not found

Example not found

Example not found

Root Provider

Use the useCollapsible hook to create the collapsible store and pass it to the Collapsible.RootProvider component. This allows you to have maximum control over the collapsible programmatically.

Example not found

Example not found

Example not found

Example not found

If you're using the Collapsible.RootProvider component, you don't need to use the Collapsible.Root component.

Programmatic Control

Use the useCollapsible hook with Collapsible.RootProvider to programmatically control the collapsible using the setOpen() method and read state properties like open and visible.

Example not found

Example not found

Example not found

Example not found

Guides

Animating the Indicator

To rotate the indicator icon (such as a chevron) when the collapsible opens and closes, use CSS transforms with the data-state attribute:

[data-scope='collapsible'][data-part='indicator'] {
  transition: transform 200ms;

  &[data-state='open'] {
    transform: rotate(180deg);
  }
}

open vs visible

When using useCollapsible or useCollapsibleContext, you can access the open and visible state properties. They seem similar but serve different purposes:

• open: Indicates the intended state of the collapsible. This is true when the collapsible should be expanded and false when it should be collapsed. This changes immediately when triggered.

• visible: Indicates whether the content is currently visible in the DOM. This accounts for exit animations - the content remains visible while the closing animation plays, even though open is already false. Once the animation completes, visible becomes false.

Animating the Content

Use the --height and/or --width CSS variables to animate the size of the content when it expands or closes.

If you use collapsedHeight or collapsedWidth, update your CSS animations to use the --collapsed-height or --collapsed-width variables as the starting/ending point:

@keyframes expand {
  from {
    height: var(--collapsed-height, 0);
  }
  to {
    height: var(--height);
  }
}

@keyframes collapse {
  from {
    height: var(--height);
  }
  to {
    height: var(--collapsed-height, 0);
  }
}

[data-scope='collapsible'][data-part='content'] {
  &[data-state='open'] {
    animation: expand 250ms;
  }
  &[data-state='closed'] {
    animation: collapse 250ms;
  }
}

API Reference

Props

Root

Content

Indicator

RootProvider

Trigger

Context

These are the properties available when using Collapsible.Context, useCollapsibleContext hook or useCollapsible hook.

API

Accessibility

Keyboard Support