Import
import { Collapsible } from '@cerberus/react'Usage
The Collapsible component allows you to show or hide content with a trigger. It is useful for accordions, dropdowns, and expandable sections.
Initial Open
Use the defaultOpen prop to render the collapsible in an open state by default.
Partial Height
Use the collapsedHeight prop to show a preview of the content when collapsed.
Effects
To turn off the animation effect, you can set the effect prop to none on the Collapsible.Content component.
Controlled
Use the open and onOpenChange props to control the collapsible state.
Customization
You can customize the Collapsible component any way you like with style props and data-selectors.
Primitives
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. |
Data Attributes
The primitives additionally use the following data attributes for custom styling:
| 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. |
data-state | "open" | "closed" | The state of the content. |
API
Collapsible
The Collapsible component is an Object containing all the primitive components.
Root Props
| Prop | Type | Required | Description |
|---|---|---|---|
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
collapsedHeight | string | number | No | The height of the content when collapsed. |
collapsedWidth | string | number | No | The width of the content when collapsed. |
defaultOpen | boolean | No | The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible. |
disabled | boolean | No | Whether the collapsible is disabled. |
effect | "none" | "fadeIin" | "expandIn" | No | The animation effect of the content when collapsed. |
ids | Partial<{ root: string; content: string; trigger: string }> | No | The ids of the elements in the collapsible. Useful for composition. |
lazyMount | boolean | No | Whether to enable lazy mounting |
onExitComplete | VoidFunction | No | The callback invoked when the exit animation completes. |
onOpenChange | (details: OpenChangeDetails) => void | No | The callback invoked when the open state changes. |
open | boolean | No | The controlled open state of the collapsible. |
unmountOnExit | boolean | No | Whether to unmount on exit. |
You can see additional options for the Root component.
Parts
The CollapsibleParts API is the same as the Collapsible component.