Collapsible
A collapsible panel controlled by a button.
View as MarkdownAnatomy
Import the component and assemble its parts:
import { Collapsible } from '@base-ui-components/react/collapsible';
<Collapsible.Root>
<Collapsible.Trigger />
<Collapsible.Panel />
</Collapsible.Root>
API reference
Root
Groups all parts of the collapsible.
Renders a <div>
element.
defaultOpen
boolean
(default: false
)
boolean
false
- Name
- Description
Whether the collapsible panel is initially open.
To render a controlled collapsible, use the
open
prop instead.- Type
boolean
- Default
false
open
boolean
boolean
- Name
- Description
Whether the collapsible panel is currently open.
To render an uncontrolled collapsible, use the
defaultOpen
prop instead.- Type
boolean
onOpenChange
function
function
- Name
- Description
Event handler called when the panel is opened or closed.
- Type
((open: boolean) => void)
disabled
boolean
(default: false
)
boolean
false
- Name
- Description
Whether the component should ignore user interaction.
- Type
boolean
- Default
false
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Collapsible.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Type
| ReactElement
| ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)
| null
Trigger
A button that opens and closes the collapsible panel.
Renders a <button>
element.
nativeButton
boolean
(default: true
)
boolean
true
- Name
- Description
Whether the component renders a native
<button>
element when replacing it via therender
prop. Set tofalse
if the rendered element is not a button (e.g.<div>
).- Type
boolean
- Default
true
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Collapsible.Root.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)
data-panel-open
Present when the collapsible panel is open.
Panel
A panel with the collapsible contents.
Renders a <div>
element.
- Name
- Description
Allows the browser’s built-in page search to find and expand the panel contents.
Overrides the
keepMounted
prop and useshidden="until-found"
to hide the element without removing it from the DOM.- Type
boolean
- Default
false
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Collapsible.Root.State) => string)
keepMounted
boolean
(default: false
)
boolean
false
- Name
- Description
Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when
hiddenUntilFound
is used.- Type
boolean
- Default
false
render
ReactElement | function
ReactElement | function
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElement
or a function that returns the element to render.- Type
| ReactElement
| ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)
data-open
Present when the collapsible panel is open.
data-closed
Present when the collapsible panel is closed.
data-starting-style
Present when the panel is animating in.
data-ending-style
Present when the panel is animating out.
--collapsible-panel-height
The collapsible panel's height.
--collapsible-panel-width
The collapsible panel's width.