Collapsible

Powered by

Base UIShadcn UI

Installation

Controlled

Multiple independent collapsibles

Disabled

Default open

Chevron on leading edge

Reveal sensitive content

Usage

<Collapsible>
  <CollapsibleTrigger>Collapsible Trigger</CollapsibleTrigger>
  <CollapsibleContent>Collapsible Content</CollapsibleContent>
</Collapsible>

When to use

Use this decision tree to determine when to use the Collapsible component:

Props

Keyboard interactions

Accessibility

• The trigger exposes aria-expanded + aria-controls pointing at the panel; Base UI sets the native data-open (root/trigger) / data-panel-open (panel) attributes you can target with CSS selectors.
• The trigger must be a real button (or another focusable element via the render prop); static <div> triggers lose keyboard activation.
• Use keepMounted on CollapsibleContent when the hidden content must remain in the DOM for SEO, intersection observers, or mid-animation measurements.

Controlled vs uncontrolled

Uncontrolled — trigger toggles the panel locally:

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>{/* ... */}</CollapsibleContent>
</Collapsible>

Controlled — drive open from parent state (e.g. expand all / collapse all from a toolbar):

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>{/* ... */}</CollapsibleContent>
</Collapsible>

Don't delete from the DOM

The choice made (also Base UI's default) is to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Collapsible content to be taken into account by Google, pass keepMounted to CollapsibleContent — the closed panel stays in the DOM (hidden via the hidden attribute):

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent keepMounted>{/* stays in the DOM while closed */}</CollapsibleContent>
</Collapsible>

To additionally let the browser's find-in-page (Ctrl/Cmd + F) reveal the closed content, use hiddenUntilFound instead (implies keepMounted and hides the panel with hidden="until-found"):

<CollapsibleContent hiddenUntilFound>{/* discoverable by find-in-page */}</CollapsibleContent>

Credits

• We use Base UI for the collapsible component.
• We take our inspiration from Shadcn UI for the collapsible style.