Collapsible

A collapsible panel controlled by a button.

View as Markdown

Anatomy

Import the component and assemble its parts:

Anatomy

API reference

Root

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

defaultOpen

boolean

(default:

false

)
Description

Whether the collapsible panel is initially open.

To render a controlled collapsible, use the open prop instead.

Type

boolean

Default

false

open

boolean

Name
Description

Whether the collapsible panel is currently open.

To render an uncontrolled collapsible, use the defaultOpen prop instead.

Type

boolean

onOpenChange

function

Description

Event handler called when the panel is opened or closed.

Type

((open: boolean) => void)

disabled

boolean

(default:

false

)
Description

Whether the component should ignore user interaction.

Type

boolean

Default

false

className

string | function

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

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

)
Description

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).

Type

boolean

Default

true

className

string | function

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

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.

hiddenUntilFound

boolean

(default:

false

)
Description

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.

Type

boolean

Default

false

className

string | function

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

)
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

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.