Collapsible

A high-quality, unstyled React collapsible component that displays a panel controlled by a button.

A collapsible panel controlled by a button.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Collapsible } from '@base-ui/react/collapsible';

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Panel />
</Collapsible.Root>;

Name	Type	Default	Description
`open`Optional	`boolean \| undefined`	—	Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
`defaultOpen`Optional	`boolean \| undefined`	`false`	Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
`disabled`Optional	`boolean \| undefined`	`false`	Whether the component should ignore user interaction.

Name	Type	Default	Description
`hiddenUntilFound`Optional	`boolean \| undefined`	`false`	Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.
`keepMounted`Optional	`boolean \| undefined`	`false`	Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hiddenUntilFound` is used.