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>
  );
}

API reference

Import the component and assemble its parts:

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
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`undefined`
`onOpenChange`	`(open) => void`	`undefined`
`disabled`	`boolean`	`false`
`className`	`string \| (state) => string`	`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 \| (props, state) => 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
`hiddenUntilFound`	`boolean`	`false`
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

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.

CSS Variable	Description
`--collapsible-panel-height`	The collapsible panel's height.
`--collapsible-panel-width`	The collapsible panel's width.