Accordion
Questions that open in place under a rule each, the panel easing to its measured height and the chevron turning with it.
01Preview
01Everything in the thread up to its context window. Older turns are summarised once a thread outgrows it.
02Installation
npx shadcn@latest add https://aiellie.app/r/accordion.json03API reference
05From the Base UI documentation
Groups all parts of the accordion. Renders a <div> element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | Value[] | - | The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the value prop instead. |
| value | Value[] | - | The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the defaultValue prop instead. |
| onValueChange | ((value: Value[], 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 | - | Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior. |
| 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' | Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior. |
| className | string | ((state: Accordion.Root.State<Value>) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Accordion.Root.State<Value>) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| 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<Value>) => 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. |
Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-orientation | - | Indicates the orientation of the accordion. |
| data-disabled | - | Present when the accordion is disabled. |