---
id: accordion
title: Accordion
description: A collapsible component for displaying content in a vertical stack.
---

<ComponentPreview id="Accordion" />

## Anatomy

<Anatomy id="accordion" />

```tsx
<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger>
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>
```

## Examples

### Default Value

Set the `defaultValue` prop to specify which item should be expanded by default.

<Example id="basic" />

### Controlled

Use the `value` and `onValueChange` props to control the expanded items.

<Example id="controlled" />

### Root Provider

An alternative way to control the accordion is to use the `RootProvider` component and the `useAccordion` hook. This way
you can access the state and methods from outside the component.

<Example id="root-provider" />

### Collapsible

Use the `collapsible` prop to allow the user to collapse all panels.

<Example id="collapsible" />

### Multiple

Use the `multiple` prop to allow multiple panels to be expanded simultaneously.

<Example id="multiple" />

### Horizontal

By default, the Accordion is oriented vertically. Use the `orientation` prop to switch to a horizontal layout.

<Example id="horizontal" />

### Lazy Mount

Use the `lazyMount` prop to defer rendering of accordion content until the item is expanded. Combine with
`unmountOnExit` to unmount content when collapsed, freeing up resources.

<Example id="lazy-mount" />

### Context

Use `Accordion.Context` or `useAccordionContext` to access the accordion state.

<Example id="context" />

### Item State

Use `Accordion.ItemContext` or `useAccordionItemContext` to access the state of an accordion item.

<Example id="item-context" />

## Guides

### Content Animation

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

```css
@keyframes slideDown {
  from {
    opacity: 0.01;
    height: 0;
  }
  to {
    opacity: 1;
    height: var(--height);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    height: var(--height);
  }
  to {
    opacity: 0.01;
    height: 0;
  }
}

[data-scope='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms ease-in-out;
}

[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
  animation: slideUp 200ms ease-in-out;
}
```

## API Reference

### Props

<ComponentTypes id="accordion" />

### Context

<ContextType id="accordion" />

## Accessibility

This component complies with the
[Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

### Keyboard Support

<KeyBindingsTable id="accordion" />
