import { Collapsible } from '@cerberus-design/react'The Collapsible component allows you to show or hide content with a trigger. It is useful for accordions, dropdowns, and expandable sections.
To turn off the animation effect, you can set the effect prop to none on the Collapsible.Content component.
You can utilize the primitive components to build a custom collapsible solution.
| Component | Description |
|---|---|
| CollapsibleRoot | The context provider of the collapsible. |
| CollapsibleTrigger | The button that toggles the collapsible. |
| CollapsibleIndicator | The indicator that shows the state. |
| CollapsibleContent | The content of the collapsible. |
Each primitive component has a data attribute for easy targeting.
| Name | Value | Description |
|---|---|---|
data-scope | collapsible | The scope of the components. |
data-part | root | The root container part. |
data-part | trigger | The trigger part. |
data-part | indicator | The indicator part. |
data-part | content | The content part. |
The Collapsible component is an Object containing all the primitive components.
You can see additional options for the Root component.
The CollapsibleParts API is the same as the Collapsible component.
On this page