Accordion

A stack of headings that each expand to reveal a section of content.

Preview

Loading Preview...

bun add xiod-ui

1import {2  Accordion,3  AccordionItem,4  AccordionPanel,5  AccordionTrigger6} from "xiod-ui/accordion";

1<Accordion>2  <AccordionItem>3    <AccordionTrigger />4    <AccordionPanel />5  </AccordionItem>6</Accordion>

Detailed documentation of properties and options.

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`defaultValue`	`AccordionValue<any>`	–	The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead.
`disabled`

boolean

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the component should ignore user interaction.
`onOpenChange`	`((open: boolean, eventDetails: AccordionItemChangeEventDetails) => void)`	–	Event handler called when the panel is opened or closed.
`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.

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`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.
`keepMounted`	`boolean`	`false`	Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`icon`	`ReactNode`	–	Replaces this icon. Accepts any node; `null` renders no icon. Takes precedence over `IconProvider`.
`nativeButton`	`boolean`	`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>`).