# Accordion

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

## Features

- Full keyboard navigation.

- Supports horizontal/vertical orientation.

- Supports Right to Left direction.

- Can expand one or multiple items.

- Can be controlled or uncontrolled.

## [Installation](#installation)

Install the component from your command line.

```bash
npm install @radix-ui/react-accordion
```

## [Anatomy](#anatomy)

Import all parts and piece them together.

```jsx
import { Accordion } from "radix-ui";

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

      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
);
```

## [API Reference](#api-reference)

### [Root](#root)

Contains all the parts of an accordion.

| Prop            | Type       | Default          |
| --------------- | ---------- | ---------------- |
| `asChild`       | `boolean`  | `false`          |
| `type*`         | `enum`     | No default value |
| `value`         | `string`   | No default value |
| `defaultValue`  | `string`   | No default value |
| `onValueChange` | `function` | No default value |
| `value`         | `string[]` | `[]`             |
| `defaultValue`  | `string[]` | `[]`             |
| `onValueChange` | `function` | No default value |
| `collapsible`   | `boolean`  | `false`          |
| `disabled`      | `boolean`  | `false`          |
| `dir`           | `enum`     | `"ltr"`          |
| `orientation`   | `enum`     | `"vertical"`     |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [Item](#item)

Contains all the parts of a collapsible section.

| Prop       | Type      | Default          |
| ---------- | --------- | ---------------- |
| `asChild`  | `boolean` | `false`          |
| `disabled` | `boolean` | `false`          |
| `value*`   | `string`  | No default value |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | Present when disabled        |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [Header](#header)

Wraps an `Accordion.Trigger`. Use the `asChild` prop to update it to the appropriate heading level for your page.

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | Present when disabled        |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [Trigger](#trigger)

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

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | Present when disabled        |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [Content](#content)

Contains the collapsible content for an item.

| Prop         | Type      | Default          |
| ------------ | --------- | ---------------- |
| `asChild`    | `boolean` | `false`          |
| `forceMount` | `boolean` | No default value |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | Present when disabled        |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

| CSS Variable                       | Description                                    |
| ---------------------------------- | ---------------------------------------------- |
| `--radix-accordion-content-width`  | The width of the content when it opens/closes  |
| `--radix-accordion-content-height` | The height of the content when it opens/closes |

## [Examples](#examples)

### [Expanded by default](#expanded-by-default)

Use the `defaultValue` prop to define the open item by default.

```jsx
<Accordion.Root type="single" defaultValue="item-2">
  <Accordion.Item value="item-1">…</Accordion.Item>

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [Allow collapsing all items](#allow-collapsing-all-items)

Use the `collapsible` prop to allow all items to close.

```jsx
<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">…</Accordion.Item>

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [Multiple items open at the same time](#multiple-items-open-at-the-same-time)

Set the `type` prop to `multiple` to enable opening multiple items at once.

```jsx
<Accordion.Root type="multiple">
  <Accordion.Item value="item-1">…</Accordion.Item>

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [Rotated icon when open](#rotated-icon-when-open)

You can add extra decorative elements, such as chevrons, and rotate it when the item is open.

```jsx
// index.jsx

import { Accordion } from "radix-ui";

import { ChevronDownIcon } from "@radix-ui/react-icons";

import "./styles.css";

export default () => (
  <Accordion.Root type="single">
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger className="AccordionTrigger">
          <span>Trigger text</span>

          <ChevronDownIcon className="AccordionChevron" aria-hidden />
        </Accordion.Trigger>
      </Accordion.Header>

      <Accordion.Content>…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);
```

```css
/* styles.css */

.AccordionChevron {
  transition: transform 300ms;
}

.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}
```

### [Horizontal orientation](#horizontal-orientation)

Use the `orientation` prop to create a horizontal accordion.

```jsx
<Accordion.Root orientation="horizontal">
  <Accordion.Item value="item-1">…</Accordion.Item>

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [Animating content size](#animating-content-size)

Use the `--radix-accordion-content-width` and/or `--radix-accordion-content-height` CSS variables to animate the size of the content when it opens/closes:

```jsx
// index.jsx

import { Accordion } from "radix-ui";

import "./styles.css";

export default () => (
  <Accordion.Root type="single">
    <Accordion.Item value="item-1">
      <Accordion.Header>…</Accordion.Header>

      <Accordion.Content className="AccordionContent">…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);
```

```css
/* styles.css */

.AccordionContent {
  overflow: hidden;
}

.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}

.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
```

## [Accessibility](#accessibility)

Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion).

### [Keyboard Interactions](#keyboard-interactions)

| Key           | Description                                                                                 |
| ------------- | ------------------------------------------------------------------------------------------- |
| `Space`       | When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.        |
| `Enter`       | When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.        |
| `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` when<!-- --> `orientation` is `vertical`.       |
| `ArrowUp`     | Moves focus to the previous `Accordion.Trigger` when<!-- --> `orientation` is `vertical`.   |
| `ArrowRight`  | Moves focus to the next `Accordion.Trigger` when<!-- --> `orientation` is `horizontal`.     |
| `ArrowLeft`   | Moves focus to the previous `Accordion.Trigger` when<!-- --> `orientation` is `horizontal`. |
| `Home`        | When focus is on an `Accordion.Trigger`, moves focus to the first `Accordion.Trigger`.      |
| `End`         | When focus is on an `Accordion.Trigger`, moves focus to the last `Accordion.Trigger`.       |