//
A vertically stacked set of interactive headings that each reveal a section of content.
bun add xiod-ui1import {2 Accordion,3 AccordionContent,4 AccordionPanel,5 AccordionItem,6 AccordionTrigger7} from "xiod-ui/accordion";1<Accordion>2 <AccordionTrigger />3 <AccordionContent>4 <AccordionItem />5 <AccordionPanel />6 </AccordionContent>7</Accordion>| Prop | Type | Default | Description |
|---|---|---|---|
value | AccordionValue<any>| undefined | - | The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead. |
defaultValue | AccordionValue<any>| undefined | - | The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
hiddenUntilFound | 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. |
keepMounted | boolean| undefined | false | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. |
loopFocus | boolean| undefined | - | 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. @deprecated |
onValueChange | ((value: AccordionValue<any>, eventDetails: AccordionRootChangeEventDetails) => void)| undefined | - | Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument. |
multiple | boolean| undefined | false | Whether multiple items can be open at the same time. |
orientation | Orientation| undefined | '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. @deprecated |
className | string| ((state: State<any>) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, State<any>>| undefined | - | 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. |
style | CSSProperties| ((state: State<any>) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: AccordionPanelState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, AccordionPanelState>| undefined | - | 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. |
style | CSSProperties| ((state: AccordionPanelState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
keepMounted | boolean| undefined | false | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. |
hiddenUntilFound | 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. |
| 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. @example ```tsx <Accordion.Root value={['a']}> <Accordion.Item value="a" /> // initially open <Accordion.Item value="b" /> // initially closed </Accordion.Root> ``` |
onOpenChange | ((open: boolean, eventDetails: AccordionItemChangeEventDetails) => void)| undefined | - | Event handler called when the panel is opened or closed. |
className | string| ((state: AccordionItemState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, AccordionItemState>| undefined | - | 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. |
style | CSSProperties| ((state: AccordionItemState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
| Prop | Type | Default | Description |
|---|---|---|---|
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: AccordionTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, AccordionTriggerState>| undefined | - | 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. |
style | CSSProperties| ((state: AccordionTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |