Skip to main content
The Accordion component allows users to expand and collapse sections of content. It supports both single and multiple panel expansion modes.

​
Import

import { Accordion } from '@base-ui/react/accordion';

​
Basic Usage

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>Section 1</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      Content for section 1
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>Section 2</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      Content for section 2
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

​
Key Features

  • Controlled or Uncontrolled: Use value and onValueChange for controlled state, or defaultValue for uncontrolled.
  • Multiple Expansion: Set multiple prop to allow multiple panels to be open simultaneously.
  • Keyboard Navigation: Full arrow key navigation with optional loopFocus behavior.
  • Orientation Support: Configure as vertical or horizontal to control keyboard navigation.
  • Accessibility: Built-in ARIA attributes and proper semantic structure.
  • Keep Mounted: Control whether panels stay in the DOM when closed with keepMounted.
  • Hidden Until Found: Enable browser’s page search to find and expand panels with hiddenUntilFound.

​
Components

​
Accordion.Root

The root container that manages accordion state. Props:
  • value - Controlled array of open item values
  • defaultValue - Initial array of open item values (uncontrolled)
  • onValueChange - Callback when items are expanded/collapsed
  • multiple - Allow multiple items open at once (default: false)
  • disabled - Disable all user interaction (default: false)
  • orientation - Visual orientation: 'vertical' or 'horizontal' (default: 'vertical')
  • loopFocus - Loop focus when reaching end with arrow keys (default: true)
  • keepMounted - Keep panels in DOM when closed (default: false)
  • hiddenUntilFound - Allow browser search to expand panels (default: false)

​
Accordion.Item

Groups an accordion header with its corresponding panel. Props:
  • value - Unique identifier for this item
  • disabled - Disable this specific item
  • onOpenChange - Callback when this item is opened/closed

​
Accordion.Header

A heading element that labels the panel. Renders an <h3> element by default.

​
Accordion.Trigger

A button that toggles the panel. Renders a <button> element. Props:
  • disabled - Disable the trigger button
  • nativeButton - Use native button behavior (default: true)

​
Accordion.Panel

The collapsible panel containing the content. Renders a <div> element. Props:
  • keepMounted - Keep this panel in DOM when closed
  • hiddenUntilFound - Allow browser search for this panel

​
Styling Example

<Accordion.Root className="accordion">
  <Accordion.Item className="accordion-item">
    <Accordion.Header className="accordion-header">
      <Accordion.Trigger className="accordion-trigger">
        Section 1
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel className="accordion-panel">
      Content for section 1
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

.accordion-item[data-open] .accordion-trigger {
  /* Styles when item is open */
}

.accordion-panel {
  overflow: hidden;
  transition: height 200ms;
}

.accordion-panel[data-starting-style],
.accordion-panel[data-ending-style] {
  height: 0;
}

.accordion-panel[data-open] {
  height: var(--accordion-panel-height);
}

​
Multiple Panels

<Accordion.Root multiple defaultValue={['item-1', 'item-2']}>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>Section 1</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Content 1</Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header>
      <Accordion.Trigger>Section 2</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Content 2</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>