Collapsible

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Collapsible component creates interactive sections that can show or hide content with smooth animations. It's perfect for FAQs, navigation menus, settings panels, or any interface where you need to save vertical space while keeping content accessible.

Basic Usage

FAQ Style

Settings Panel Style

Navigation Menu Style

Properties

Collapsible

Property	Type	Description
defaultOpen	boolean	The initial open state when uncontrolled. Default: false.
open	boolean	The controlled open state of the collapsible.
onOpenChange	(open: boolean) => void	Callback fired when the open state changes.
disabled	boolean	When true, prevents the user from interacting with the collapsible.
className	string	Additional CSS classes for custom styling.
children	React.ReactNode	The trigger and content elements.

CollapsibleTrigger

Property	Type	Description
asChild	boolean	When true, renders as the child element instead of a button.
className	string	Additional CSS classes for custom styling.
children	React.ReactNode	The trigger content or child element.

CollapsibleContent

Property	Type	Description
forceMount	boolean	When true, forces the content to render even when closed.
className	string	Additional CSS classes for custom styling.
children	React.ReactNode	The collapsible content.

Animation Behavior

The Collapsible component uses smooth CSS animations for opening and closing:

• Opening - Content slides down with a smooth height transition
• Closing - Content slides up and fades out gracefully
• Duration - Animations respect user motion preferences
• Easing - Uses natural easing curves for smooth motion

Accessibility

The Collapsible component includes comprehensive accessibility features:

• Keyboard Navigation - Space and Enter keys toggle the collapsible
• ARIA Attributes - Proper aria-expanded and aria-controls attributes
• Screen Reader Support - Clear announcements of state changes
• Focus Management - Logical focus order and visible focus indicators
• Semantic HTML - Uses appropriate button and region roles

Common Use Cases

The Collapsible component is perfect for:

• FAQ Sections - Expandable question and answer pairs
• Settings Panels - Grouped configuration options
• Navigation Menus - Hierarchical menu structures
• Content Sections - Expandable content areas
• Form Sections - Grouped form fields and options
• Documentation - Expandable code examples and details

Best Practices

1. Clear Triggers - Use descriptive text and visual indicators
2. Logical Grouping - Group related content together
3. Default States - Consider which sections should be open by default
4. Visual Feedback - Provide clear open/closed state indicators
5. Content Length - Keep collapsible content reasonably sized
6. Mobile Friendly - Ensure touch targets are appropriately sized
7. Performance - Use forceMount sparingly to avoid unnecessary rendering