# Accordion

URL: https://ark-ui.com/docs/components/accordion
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/accordion.mdx

A collapsible component for displaying content in a vertical stack.

---

<ComponentPreview id="Accordion" />

## Features

- Full keyboard navigation
- Supports horizontal and vertical orientation
- Right-to-Left (RTL) support
- Single or multiple item expansion
- Controlled and uncontrolled modes
- Collapse each accordion item

## Anatomy

To set up the accordion correctly, it's essential to understand its anatomy and the naming of its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="accordion" />

## Examples

### Default Expanded State

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

<Example id="basic" />

### Collapsible

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

<Example id="collapsible" />

### Multiple Panels

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

<Example id="multiple" />

### Horizontal Orientation

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

<Example id="horizontal" />

### Using the Root Provider

The `RootProvider` component provides a context for the accordion. It accepts the value of the `useAccordion` hook. You
can leverage it to access the component state and methods from outside the accordion.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

### Accessing context

Use the `Accordion.Context` component or `useAccordionContext` hook to access the state of an accordion. It exposes the
following properties:

- `focusedValue`: The value of the focused accordion item.
- `value`: The value of the selected accordion items.
- `setValue`: A method to set the selected accordion items.

<Example id="context" />

### Accessing the item context

Use the `Accordion.ItemContext` component or `useAccordionItemContext` hook to access the state of an accordion item. It
exposes the following properties:

- `expanded`: Whether the accordion item is expanded.
- `focused`: Whether the accordion item is focused.
- `disabled`: Whether the accordion item is disabled.

<Example id="item-context" />

## Guides

### Animate Content Size

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

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item: (value: string) => string
  itemContent: (value: string) => string
  itemTrigger: (value: string) => string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | The callback fired when the focused accordion item changes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback fired when the state of expanded/collapsed accordion items changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string[]` | No | The controlled value of the expanded accordion items. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the accordion |


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemContent Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-content |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**ItemIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-indicator |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item |
| `[data-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |


**ItemTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-trigger |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "open" | "closed" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAccordionReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `ids` | `Partial<{
  root: string
  item: (value: string) => string
  itemContent: (value: string) => string
  itemTrigger: (value: string) => string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | The callback fired when the focused accordion item changes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback fired when the state of expanded/collapsed accordion items changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string[]` | No | The controlled value of the expanded accordion items. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the accordion |


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemContent Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-content |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**ItemIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-indicator |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item |
| `[data-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |


**ItemTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-trigger |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "open" | "closed" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAccordionReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item(value: string): string
  itemContent(value: string): string
  itemTrigger(value: string): string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `modelValue` | `string[]` | No | The v-model value of the accordion |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the accordion |


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemContent Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-content |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**ItemIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-indicator |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item |
| `[data-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |


**ItemTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-trigger |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "open" | "closed" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `AccordionApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `collapsible` | `boolean` | No | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | Whether the accordion items are disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item: (value: string) => string
  itemContent: (value: string) => string
  itemTrigger: (value: string) => string
}>` | No | The ids of the elements in the accordion. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `multiple` | `boolean` | No | Whether multiple accordion items can be expanded at the same time. |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | The callback fired when the focused accordion item changes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback fired when the state of expanded/collapsed accordion items changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the accordion items. |
| `ref` | `Element` | No |  |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `string[]` | No | The controlled value of the expanded accordion items. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the accordion |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseAccordionContext]>` | Yes |  |


**ItemContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemContent Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-content |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**ItemContext Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseAccordionItemContext]>` | Yes |  |


**ItemIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-indicator |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |
| `[data-orientation]` | The orientation of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes | The value of the accordion item. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the accordion item is disabled. |
| `ref` | `Element` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item |
| `[data-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |


**ItemTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | accordion |
| `[data-part]` | item-trigger |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "open" | "closed" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAccordionReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `ref` | `Element` | No |  |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


### Context

These are the properties available when using `Accordion.Context`, `useAccordionContext` hook or `useAccordion` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `focusedValue` | `string` | The value of the focused accordion item. |
| `value` | `string[]` | The value of the accordion |
| `setValue` | `(value: string[]) => void` | Sets the value of the accordion |
| `getItemState` | `(props: ItemProps) => ItemState` | Returns the state of an accordion item. |


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