Collapsible
Show and hide content with smooth animations. Built on Radix UI with full RTL support.
Preview
Installation
Usage
Composition Pattern
The Collapsible component follows a composition pattern with three sub-components:
- •
Collapsible- Root component managing state - •
CollapsibleTrigger- Button to toggle open/closed - •
CollapsibleContent- Content that collapses/expands
Examples
Controlled with Animated Icon
This collapsible is controlled, meaning you manage the open state. The chevron rotates smoothly when toggled.
Sidebar Style
Starred Repositories
FAQ Style
Props
Collapsible
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state |
defaultOpen | boolean | false | Default open state (uncontrolled) |
onOpenChange | (open: boolean) => void | undefined | Callback when open state changes |
disabled | boolean | false | Whether the collapsible is disabled |
This component is built on top of Radix UI's Collapsible primitive. For additional props, refer to the Radix UI documentation.
Accessibility
Keyboard Navigation
SpaceToggles the collapsible when trigger is focusedEnterToggles the collapsible when trigger is focused
ARIA Attributes
The component automatically manages aria-expanded and aria-controls for screen reader users. The trigger button communicates whether the content is currently expanded or collapsed.
Visual Indicators
Always include a visual indicator (like a chevron icon) that shows the current state. Animate the indicator to provide feedback when the state changes.
RTL Considerations
Collapsible components automatically support RTL layout. Icons position correctly using logical properties and rotate appropriately.