> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> A vertically stacked set of interactive headings that each reveal a section of content.

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

## Import

```tsx theme={null}
import { Accordion } from '@base-ui/react/accordion';
```

## Basic Usage

```tsx theme={null}
<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

```tsx theme={null}
<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>
```

```css theme={null}
.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

```tsx theme={null}
<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>
```