Collapsible
Composition

Collapsible

A section that expands and collapses, with height animation and the aria-expanded/aria-controls attributes included.

Behavior

Collapsible expands and collapses content with height animation. CollapsibleTrigger provides aria-expanded and aria-controls.

  • Expansion animates to the measured content height, then resets height to auto so content can resize.
  • The collapsed panel receives hidden after the closing transition. Hidden content is excluded from keyboard navigation.
  • prefers-reduced-motion disables the transition.

Usage

Collapsible

open can be controlled or uncontrolled: pass it with onOpenChange to drive the section from your own state, or pass defaultOpen to let the component manage its own state.

Padding

CollapsibleContent renders an outer box for height animation and clipping, and an inner box for content. Apply padding to the inner box through innerClassName; outer padding participates in the height animation. Apply backgrounds and borders to the outer box. AccordionItem uses this structure.

AccordionItem, in outlineTSX
<CollapsibleContent className={styles.panel} innerClassName={styles.body}>
  {children}
</CollapsibleContent>

/* .panel  — border-top and background: the animated clip
   .body   — padding: a constant while the height moves */

Props

CollapsibleProps props
PropTypeDefaultDescription
openboolean—Controlled open state. Any value other than undefined switches the section to controlled mode.
defaultOpenbooleanfalseInitial state when uncontrolled.
onOpenChange(open: boolean) => void—Fires on every toggle, controlled and uncontrolled alike.
keepMountedbooleanfalseKeeps children mounted while collapsed. Defaults to false. Hidden content remains outside the tab order in either mode.
disabledboolean—Marks the trigger disabled and stops it toggling.
childrenReactNode—A CollapsibleTrigger and a CollapsibleContent, in that order.
CollapsibleTriggerProps props
PropTypeDefaultDescription
asChildboolean—Applies trigger attributes to the child element. Preserves the child onClick handler and adds id, aria-expanded, aria-controls, and data-state. Defaults to rendering an unstyled button.
childrenReactNode—The trigger's contents, or the single element to wire when asChild is set.
CollapsibleContentProps props
PropTypeDefaultDescription
innerClassNamestring—Class for the inner content box. Apply padding here. className targets the outer animation and clipping box.
childrenReactNode—The panel's contents.