Collapsible
View on StorybookStorybookShow 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 |
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.
Use Cases
Show/hide additional details
Advanced options in forms
Expandable code blocks or logs
FAQ answers and help sections
Best Practices
Do
- ✓ Use a clear trigger label indicating what will appear
- ✓ Animate height transitions smoothly
- ✓ Preserve state across re-renders
Don't
- ✗ Don't hide required form fields in collapsible sections
- ✗ Don't use for content that most users need to see
- ✗ Don't use when Accordion with headers would be clearer