Collapsible

A collapsible panel controlled by a button.

import * as React from 'react';
import { Collapsible } from '@base-ui-components/react/collapsible';
import styles from './index.module.css';

export default function ExampleCollapsible() {
  return (
    <Collapsible.Root className={styles.Collapsible}>
      <Collapsible.Trigger className={styles.Trigger}>
        <ChevronIcon className={styles.Icon} />
        Recovery keys
      </Collapsible.Trigger>
      <Collapsible.Panel className={styles.Panel}>
        <div className={styles.Content}>
          <div>alien-bean-pasta</div>
          <div>wild-irish-burrito</div>
          <div>horse-battery-staple</div>
        </div>
      </Collapsible.Panel>
    </Collapsible.Root>
  );
}

export function ChevronIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentcolor" />
    </svg>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

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

)

Name: defaultOpen
Description: Whether the collapsible panel is initially open.

To render a controlled collapsible, use the open prop instead.
Type: boolean | undefined
Default: false

open

boolean

Name: open
Description: Whether the collapsible panel is currently open.

To render an uncontrolled collapsible, use the defaultOpen prop instead.
Type: boolean | undefined

onOpenChange

function

Name: onOpenChange
Description: Event handler called when the panel is opened or closed.
Type: ((open: boolean) => void) | undefined

disabled

boolean

(default:

false

)

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

className

string | function

Name: className
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: render
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

)

Name: nativeButton
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 | undefined
Default: true

className

string | function

Name: className
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: render
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.

Attribute	Description
`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

)

Name: hiddenUntilFound
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 | undefined
Default: false

className

string | function

Name: className
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

)

Name: keepMounted
Description: Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when hiddenUntilFound is used.
Type: boolean | undefined
Default: false

render

ReactElement | function

Name: render
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.

Attribute	Description
`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.