Accordion
A high-quality, unstyled React accordion component that displays a set of collapsible panels with headings.
A set of collapsible panels with headings.
Anatomy
Import the component and assemble its parts:
import { Accordion } from '@base-ui/react/accordion';
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Panel />
</Accordion.Item>
</Accordion.Root>;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.
API reference
Root
| Name | Type | Default | Description |
|---|---|---|---|
valueOptional | AccordionValue<Value> | undefined | — | The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead. |
defaultValueOptional | AccordionValue<Value> | undefined | — | The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead. |
disabledOptional | boolean | undefined | false | Whether the component should ignore user interaction. |
hiddenUntilFoundOptional | boolean | undefined | 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. |
keepMountedOptional | boolean | undefined | false | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. |
loopFocusOptional | boolean | undefined | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
multipleOptional | boolean | undefined | false | Whether multiple items can be open at the same time. |
orientationOptional | Orientation | undefined | vertical | The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys. |