Accordion

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>

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

Import

Basic Usage

Key Features

Components

Accordion.Root

Accordion.Item

Accordion.Header

Accordion.Trigger

Accordion.Panel

Styling Example

Multiple Panels

​Import

​Basic Usage

​Key Features

​Components

​Accordion.Root

​Accordion.Item

​Accordion.Header

​Accordion.Trigger

​Accordion.Panel

​Styling Example

​Multiple Panels

Import

Basic Usage

Key Features

Components

Accordion.Root

Accordion.Item

Accordion.Header

Accordion.Trigger

Accordion.Panel

Styling Example

Multiple Panels