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.
Prop | Type | Default | |
---|---|---|---|
className | string | (state) => string | undefined | |
defaultOpen | boolean | false | |
disabled | boolean | false | |
onOpenChange | (open) => void | undefined | |
open | boolean | undefined |
Trigger
A button that opens and closes the collapsible panel.
Renders a <button>
element.
Prop | Type | Default | |
---|---|---|---|
className | string | (state) => string | undefined | |
render | | React.ReactElement | undefined |
Attribute | Description | |
---|---|---|
data-panel-open | Present when the collapsible panel is open. |
Panel
A panel with the collapsible contents.
Renders a <div>
element.
Prop | Type | Default | |
---|---|---|---|
className | string | (state) => string | undefined | |
hiddenUntilFound | boolean | false | |
keepMounted | boolean | false | |
render | | React.ReactElement | undefined |
CSS Variable | Description | |
---|---|---|
--collapsible-panel-height | The collapsible panel's height. | |
--collapsible-panel-width | The collapsible panel's width. |