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

# Accordion

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

## Overview

Accordion is a vertically stacked set of interactive headings that each reveal a section of content. It's built on top of the Collapsible primitive.

## Features

* Full keyboard navigation
* Supports horizontal and vertical orientation
* Can expand one or multiple items at a time
* Can be controlled or uncontrolled
* Collapsible items can optionally be disabled

## Installation

```bash theme={null}
npm install @radix-ui/react-accordion
```

## Anatomy

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

export default () => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>
      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
)
```

## API Reference

### Root

Contains all the parts of an accordion.

<ParamField path="type" type="'single' | 'multiple'" required>
  Determines whether one or multiple items can be opened at the same time.
</ParamField>

<ParamField path="value" type="string">
  The controlled value of the item to expand when `type` is `"single"`. Must be used in conjunction with `onValueChange`.
</ParamField>

<ParamField path="defaultValue" type="string">
  The value of the item to expand when initially rendered and `type` is `"single"`. Use when you do not need to control the state.
</ParamField>

<ParamField path="onValueChange" type="(value: string) => void">
  Event handler called when the expanded state changes and `type` is `"single"`.
</ParamField>

<ParamField path="value" type="string[]">
  The controlled value of the items to expand when `type` is `"multiple"`. Must be used in conjunction with `onValueChange`.
</ParamField>

<ParamField path="defaultValue" type="string[]">
  The value of the items to expand when initially rendered and `type` is `"multiple"`. Use when you do not need to control the state.
</ParamField>

<ParamField path="onValueChange" type="(value: string[]) => void">
  Event handler called when the expanded state changes and `type` is `"multiple"`.
</ParamField>

<ParamField path="collapsible" type="boolean" default="false">
  When `type` is `"single"`, allows closing content when clicking trigger for an open item.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  When `true`, prevents the user from interacting with the accordion and all its items.
</ParamField>

<ParamField path="orientation" type="'vertical' | 'horizontal'" default="'vertical'">
  The orientation of the accordion.
</ParamField>

<ParamField path="dir" type="'ltr' | 'rtl'">
  The reading direction of the accordion. If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode.
</ParamField>

### Item

Contains all the parts of a collapsible section.

<ParamField path="value" type="string" required>
  A unique value for the item.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  When `true`, prevents the user from interacting with the item.
</ParamField>

### Header

Wraps an `Accordion.Trigger`. Use the `asChild` prop to customize the element.

### Trigger

Toggles the collapsed state of its associated item. It should be nested inside an `Accordion.Header`.

### Content

Contains the collapsible content for an item.

<ParamField path="forceMount" type="boolean">
  Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
</ParamField>

## Examples

### Single Item

<CodeGroup>
  ```tsx Single theme={null}
  import * as Accordion from '@radix-ui/react-accordion';

  export default () => (
    <Accordion.Root type="single" defaultValue="item-1" collapsible>
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Yes. It adheres to the WAI-ARIA design pattern.
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger>Is it styled?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          No. It's unstyled by default, giving you freedom over styling.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
  ```
</CodeGroup>

### Multiple Items

<CodeGroup>
  ```tsx Multiple theme={null}
  import * as Accordion from '@radix-ui/react-accordion';

  export default () => (
    <Accordion.Root type="multiple" defaultValue={['item-1', 'item-2']}>
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Yes. It adheres to the WAI-ARIA design pattern.
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger>Is it unstyled?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Yes. It's completely unstyled by default.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
  ```
</CodeGroup>

## Data Attributes

### Root

* `data-orientation` - `"vertical"` or `"horizontal"`

### Item

* `data-state` - `"open"` or `"closed"`
* `data-disabled` - Present when disabled
* `data-orientation` - `"vertical"` or `"horizontal"`

### Header

* `data-state` - `"open"` or `"closed"`
* `data-disabled` - Present when disabled
* `data-orientation` - `"vertical"` or `"horizontal"`

### Trigger

* `data-state` - `"open"` or `"closed"`
* `data-disabled` - Present when disabled
* `data-orientation` - `"vertical"` or `"horizontal"`

### Content

* `data-state` - `"open"` or `"closed"`
* `data-disabled` - Present when disabled
* `data-orientation` - `"vertical"` or `"horizontal"`

## CSS Variables

### Content

* `--radix-accordion-content-height` - The height of the content when open
* `--radix-accordion-content-width` - The width of the content when open

## Keyboard Interactions

* `Space` - When focus is on an Accordion.Trigger, opens associated content
* `Enter` - When focus is on an Accordion.Trigger, opens associated content
* `Tab` - Moves focus to the next focusable element
* `Shift + Tab` - Moves focus to the previous focusable element
* `ArrowDown` - Moves focus to the next Accordion.Trigger (vertical orientation)
* `ArrowUp` - Moves focus to the previous Accordion.Trigger (vertical orientation)
* `ArrowRight` - Moves focus to the next Accordion.Trigger (horizontal orientation)
* `ArrowLeft` - Moves focus to the previous Accordion.Trigger (horizontal orientation)
* `Home` - Moves focus to the first Accordion.Trigger
* `End` - Moves focus to the last Accordion.Trigger