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

> API reference for the Accordion component

# Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

## Import

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

## Accordion.Root

Groups all parts of the accordion.

### Props

<ParamField name="value" type="any[]">
  The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead.
</ParamField>

<ParamField name="defaultValue" type="any[]">
  The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead.
</ParamField>

<ParamField name="disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField name="hiddenUntilFound" type="boolean" default="false">
  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.
</ParamField>

<ParamField name="keepMounted" type="boolean" default="false">
  Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.
</ParamField>

<ParamField name="loopFocus" type="boolean" default="true">
  Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
</ParamField>

<ParamField name="onValueChange" type="(value: any[], eventDetails: Accordion.Root.ChangeEventDetails) => void">
  Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.
</ParamField>

<ParamField name="multiple" type="boolean" default="false">
  Whether multiple items can be open at the same time.
</ParamField>

<ParamField name="orientation" type="'horizontal' | 'vertical'" default="vertical">
  The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys.
</ParamField>

## Accordion.Item

Groups an accordion header with the corresponding panel.

### Props

<ParamField name="value" type="any">
  A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state.
</ParamField>

<ParamField name="disabled" type="boolean">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField name="onOpenChange" type="(open: boolean, eventDetails: Accordion.Item.ChangeEventDetails) => void">
  Event handler called when the panel is opened or closed.
</ParamField>

## Accordion.Header

A heading that labels the corresponding panel.

### Props

Inherits common props (`className`, `render`, `style`).

## Accordion.Trigger

A button that opens and closes the corresponding panel.

### Props

<ParamField name="nativeButton" type="boolean" default="true">
  Whether the component renders a native `<button>` element when replacing it via the `render` prop.
</ParamField>

## Accordion.Panel

A collapsible panel with the accordion item contents.

### Props

<ParamField name="hiddenUntilFound" type="boolean">
  Allows the browser's built-in page search to find and expand the panel contents.
</ParamField>

<ParamField name="keepMounted" type="boolean">
  Whether to keep the element in the DOM while the panel is closed.
</ParamField>