---
title: Accordion
subtitle: A set of collapsible panels with headings.
description: A high-quality, unstyled React accordion component that displays a set of collapsible panels with headings.
---
# Accordion
A high-quality, unstyled React accordion component that displays a set of collapsible panels with headings.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import * as React from 'react';
import { Accordion } from '@base-ui/react/accordion';
export default function ExampleAccordion() {
return (
What is Base UI?
Base UI is a library of high-quality unstyled React components for design systems and
web apps.
How do I get started?
Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
you’ll feel at home.
Base UI is a library of high-quality unstyled React components for design systems and
web apps.
How do I get started?
Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
you’ll feel at home.
Can I use it for my project?
Of course! Base UI is free and open source.
);
}
function PlusIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
## Anatomy
Import the component and assemble its parts:
```jsx title="Anatomy"
import { Accordion } from '@base-ui/react/accordion';
;
```
## Examples
### Open multiple panels
You can set up the accordion to allow multiple panels to be open at the same time using the `multiple` prop.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import * as React from 'react';
import { Accordion } from '@base-ui/react/accordion';
export default function ExampleAccordion() {
return (
What is Base UI?
Base UI is a library of high-quality unstyled React components for design systems and
web apps.
How do I get started?
Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
you’ll feel at home.
Base UI is a library of high-quality unstyled React components for design systems and
web apps.
How do I get started?
Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
you’ll feel at home.
Can I use it for my project?
Of course! Base UI is free and open source.
);
}
function PlusIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
## API reference
### Root
Groups all parts of the accordion.
Renders a `
` element.
**Root Props:**
| Prop | Type | Default | Description |
| :--------------- | :---------------------------------------------------------------------------------- | :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultValue | `any[]` | - | The uncontrolled value of the item(s) that should be initially expanded.To render a controlled accordion, use the `value` prop instead. |
| value | `any[]` | - | The controlled value of the item(s) that should be expanded.To render an uncontrolled accordion, use the `defaultValue` prop instead. |
| onValueChange | `((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. |
| hiddenUntilFound | `boolean` | `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. |
| loopFocus | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. |
| multiple | `boolean` | `false` | Whether multiple items can be open at the same time. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| orientation | `Orientation` | `'vertical'` | The visual orientation of the accordion.
Controls whether roving focus uses left/right or up/down arrow keys. |
| className | `string \| ((state: Accordion.Root.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component’s state. |
| style | `CSSProperties \| ((state: Accordion.Root.State) => CSSProperties \| undefined)` | - | - |
| keepMounted | `boolean` | `false` | Whether to keep the element in the DOM while the panel is closed.
This prop is ignored when `hiddenUntilFound` is used. |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Root.State) => ReactElement)` | - | Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render. |
**Root Data Attributes:**
| Attribute | Type | Description |
| :--------------- | :--- | :------------------------------------------ |
| data-orientation | - | Indicates the orientation of the accordion. |
| data-disabled | - | Present when the accordion is disabled. |
### Item
Groups an accordion header with the corresponding panel.
Renders a `
` element.
**Item Props:**
| Prop | Type | Default | Description |
| :----------- | :---------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | `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. |
| onOpenChange | `((open: boolean, eventDetails: Accordion.Item.ChangeEventDetails) => void)` | - | Event handler called when the panel is opened or closed. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| className | `string \| ((state: Accordion.Item.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component’s state. |
| style | `CSSProperties \| ((state: Accordion.Item.State) => CSSProperties \| undefined)` | - | - |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)` | - | Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render. |
**Item Data Attributes:**
| Attribute | Type | Description |
| :------------ | :------- | :------------------------------------------- |
| data-open | - | Present when the accordion item is open. |
| data-disabled | - | Present when the accordion item is disabled. |
| data-index | `number` | Indicates the index of the accordion item. |
### Header
A heading that labels the corresponding panel.
Renders an `
` element.
**Header Props:**
| Prop | Type | Default | Description |
| :-------- | :---------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: Accordion.Item.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component’s state. |
| style | `CSSProperties \| ((state: Accordion.Item.State) => CSSProperties \| undefined)` | - | - |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)` | - | Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render. |
**Header Data Attributes:**
| Attribute | Type | Description |
| :------------ | :------- | :------------------------------------------- |
| data-open | - | Present when the accordion item is open. |
| data-disabled | - | Present when the accordion item is disabled. |
| data-index | `number` | Indicates the index of the accordion item. |
### Trigger
A button that opens and closes the corresponding panel.
Renders a `