Data display · Application UI
Accordion
A vertically stacked set of collapsible sections, each with a trigger header that toggles its content panel open or closed.
Feature showcase
Installation
Features
1 example
Default.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | any[] | - | Controlled array of expanded item values. |
| defaultValue | any[] | - | Uncontrolled initial array of expanded item values. |
| multiple | boolean | false | Whether multiple items can be open at the same time. |
| disabled | boolean | false | Whether the accordion ignores user interaction. |
| onValueChange | (value: any[], eventDetails: AccordionRootChangeEventDetails) => void | - | Called when an item is expanded or collapsed. |
| loopFocus | boolean | true | Whether keyboard focus loops back to the first item when the end is reached. |
| keepMounted | boolean | false | Whether to keep panel content in the DOM while closed. |
| hiddenUntilFound | boolean | false | Uses hidden="until-found" so browser page search can find and expand panels. |
| orientation | 'horizontal' | 'vertical' | 'vertical' | Visual orientation that controls which arrow keys move focus. |
| className | string | - | Additional CSS class names applied to the root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/accordion.tsx |
| Default example | content/examples/accordion/default.tsx |