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
CollapsibleTrigger
Trigger element that toggles the collapsible open/closed state packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
CollapsibleContent
Content that is shown/hidden based on the collapsible open state packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
packages.sections.api
Component props and API reference 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. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.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 | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
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.