Accordion

The Accordion component allows you to show and hide content sections with expand and collapse interactions.

Usage & Examples

Default Accordion

This is the content revealed when expanded.

default.tsx

<Accordion title="Default Accordion">
  <p>This is the content revealed when expanded.</p>
</Accordion>

Accordion props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	ID reference for describing the accordion toggle button. This can supplement or replace the generated description ID.
`aria-label`	`string`	No	aria	`—`	Accessible label for the accordion toggle button. Useful when the visible title is not descriptive enough.
`aria-labelledby`	`string`	No	aria	`—`	ID reference for labeling the accordion toggle button. Prefer this when an external visible label already exists.
`asyncContent`	`boolean`	No	props	`false`	If true, the accordion content is loaded asynchronously.
`children`	`ReactNode`	No	props	`—`	The content to display when the accordion is expanded.
`className`	`string`	No	styling	`—`	Additional custom class names for the wrapper element.
`customCollapsedIcon`	`ReactNode`	No	props	`—`	Custom icon to display when the accordion is collapsed.
`customExpandedIcon`	`ReactNode`	No	props	`—`	Custom icon to display when the accordion is expanded.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`description`	`string`	No	props	`—`	Accessible description. This can be announced to assistive technologies via aria-describedby.
`disabled`	`boolean`	No	props	`false`	If true, disables user interaction and styles the accordion as disabled.
`expanded`	`boolean`	No	props	`—`	If set, enables controlled mode. Determines whether the accordion is expanded.