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.

defaultOpenbooleanfalse

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

openboolean—

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

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

onOpenChangefunction—

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

disabledbooleanfalse

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

classNamestring | 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

styleReact.CSSProperties | function—

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

renderReactElement | 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

Collapsible.Root.PropsHide

Re-Export of Root props as CollapsibleRootProps

Collapsible.Root.StateHide

type CollapsibleRootState = {
  /** Whether the collapsible panel is currently open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
}

Collapsible.Root.ChangeEventReasonHide

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

Collapsible.Root.ChangeEventDetailsHide

type CollapsibleRootChangeEventDetails = (
  | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

Trigger

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

nativeButtonbooleantrue

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

classNamestring | 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.Trigger.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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.Trigger.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.

Collapsible.Trigger.PropsHide

Re-Export of Trigger props as CollapsibleTriggerProps

Collapsible.Trigger.StateHide

type CollapsibleTriggerState = {
  /** Whether the collapsible panel is currently open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
}

Panel

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

hiddenUntilFoundbooleanfalse

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

classNamestring | 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

styleReact.CSSProperties | function—

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

keepMountedbooleanfalse

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

renderReactElement | 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.

Collapsible.Panel.PropsHide

Re-Export of Panel props as CollapsiblePanelProps

Collapsible.Panel.StateHide

type CollapsiblePanelState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the collapsible panel is currently open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
}