Collapsible
A collapsible component for showing and hiding content. Composed of Collapsible (root), CollapsibleTrigger, and CollapsibleContent. Built on Radix UI primitives with smooth animations.
Installation
Import
Usage
Use Collapsible for showing and hiding content on demand. Perfect for accordions, expandable sections, and collapsible forms. Use CollapsibleTrigger with asChild to wrap custom trigger components. Control the open state with open and onOpenChange props, or use defaultOpen for uncontrolled behavior.
Design Guidelines
Use Collapsible consistently for expandable content. Provide clear visual indicators (icons, animations) for open/closed states. Use smooth transitions for better UX. Group related collapsibles together. Keep trigger labels descriptive and action-oriented.
Basic Usage
Simple collapsible with trigger and content
Default Open
Collapsible that starts in the open state
Nested Collapsibles
Multiple collapsibles nested together
With Form Content
Collapsible containing form elements
Accordion Style
Multiple collapsibles in accordion pattern
Collapsible
Root collapsible component that manages the open/closed state This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state of the collapsible |
onOpenChange | (open: boolean) => void | — | Callback fired when the open state changes |
defaultOpen | boolean | false | Default open state (uncontrolled) |
disabled | boolean | false | Disables the collapsible |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
CollapsibleTrigger
Trigger element that toggles the collapsible open/closed state This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
CollapsibleContent
Content that is shown/hidden based on the collapsible open state This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
Collapsible is built on Radix UI primitives with full keyboard navigation support. The trigger is keyboard accessible (Enter/Space). Content visibility is announced to screen readers. Use proper ARIA labels when needed.