Collapsible

Show and hide a section of content with a height animation.

Basic

Without asChild, the trigger renders its own ghost button. The trigger carries data-state, so a group-data-[state=open] class can rotate the chevron.

  • nerdwallet.com
  • forbes.com/advisor
  • reddit.com/r/personalfinance

Card section

A titled section inside a Card, open by default. The trigger is the full header row.

  • Best travel credit cards for 2026Blog post · Edited 2 hours ago
  • How Profound measures AI visibilityLanding page · Edited yesterday
  • Q3 answer engine reportReport · Edited 3 days ago

Advanced settings

With asChild, any Button can be the trigger. Use it to tuck rarely used form fields away.

Accordion

There is no separate accordion primitive. Control several collapsibles from one piece of state so only one stays open.

A citation is a link an answer engine shows next to its response. We record the domain, URL and position.

Usage

Without asChild, Collapsible.Trigger renders its own ghost text button and wraps the children in a span.


Collapsible.Root Properties

defaultOpen
boolean

Whether the collapsible is open by default

Default: false

open
boolean

Controlled open state

onOpenChange
(open: boolean) => void

Callback when open state changes

disabled
boolean

Whether the collapsible is disabled

Default: false

className
string

Additional CSS classes for the root element

Collapsible.Trigger Properties

asChild
boolean

Merges trigger behavior into the single child, usually a Button, instead of rendering the default ghost trigger

Default: false

showHoverBackground
boolean

Shows the hover background on the default trigger. Ignored with asChild.

Default: true

spanClassName
string

Additional classes for the inner span of the default trigger. Ignored with asChild.

className
string

Additional CSS classes for the trigger

Collapsible.Content Properties

forceMount
true

Keeps the content mounted while closed

className
string

Additional CSS classes for the content