Collapsible

A collapsible panel controlled by a button.

import * as React from 'react';
import { Collapsible } from '@base-ui/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/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

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, eventDetails: Collapsible.Root.ChangeEventDetails, ) => void) | undefined

disabled

boolean

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 | undefined) | undefined

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Collapsible.Root.State, ) => React.CSSProperties | undefined) | undefined

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) | undefined

Additional Types

Collapsible.Root.Props

Re-Export of Root props as CollapsibleRootProps

Collapsible.Root.State

type CollapsibleRootState = { open: boolean; disabled: boolean };

Collapsible.Root.ChangeEventReason

type CollapsibleRootChangeEventReason = 'trigger-press' | 'none';

Collapsible.Root.ChangeEventDetails

type CollapsibleRootChangeEventDetails =
  | {
      reason: 'trigger-press';
      event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
      cancel: () => void;
      allowPropagation: () => void;
      isCanceled: boolean;
      isPropagationAllowed: boolean;
      trigger: Element | undefined;
    }
  | {
      reason: 'none';
      event: Event;
      cancel: () => void;
      allowPropagation: () => void;
      isCanceled: boolean;
      isPropagationAllowed: boolean;
      trigger: Element | undefined;
    };

Trigger

A button that opens and closes the collapsible panel. Renders a <button> element.

nativeButton

boolean

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 (for example, <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 | undefined) | undefined

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Collapsible.Root.State, ) => React.CSSProperties | undefined) | undefined

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) | undefined

data-panel-open

Present when the collapsible panel is open.

Attribute	Description	-
`data-panel-open`	Present when the collapsible panel is open.

Additional Types

Collapsible.Trigger.Props

Re-Export of Trigger props as CollapsibleTriggerProps

Panel

A panel with the collapsible contents. Renders a <div> element.

hiddenUntilFound

boolean

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.Panel.State) => string | undefined) | undefined

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: Collapsible.Panel.State, ) => React.CSSProperties | undefined) | undefined

keepMounted

boolean

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.Panel.State, ) => ReactElement) | undefined

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.

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

Additional Types

Collapsible.Panel.Props

Re-Export of Panel props as CollapsiblePanelProps

Collapsible.Panel.State

type CollapsiblePanelState = {
  transitionStatus: TransitionStatus;
  open: boolean;
  disabled: boolean;
};