Collapsible

A collapsible panel controlled by a button.

API reference

Import the component and place its parts the following way:

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

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

Root

Groups all parts of the collapsible. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
defaultOpenbooleanfalse
disabledbooleanfalse
onOpenChange(open) => voidundefined
openbooleanundefined

Trigger

A button that opens and closes the collapsible panel. Renders a <button> element.

PropTypeDefault
classNamestring | (state) => stringundefined
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
Attribute
Description
data-panel-open

Panel

A panel with the collapsible contents. Renders a <div> element.

PropTypeDefault
classNamestring | (state) => stringundefined
hiddenUntilFoundbooleanfalse
keepMountedbooleanfalse
render| React.ReactElement
| (props, state) => React.ReactElement
undefined
CSS Variable
Description
--collapsible-panel-height
--collapsible-panel-width