Accordion
The Accordion component allows you to show and hide content sections with expand and collapse interactions.
Usage
Default
This is the content revealed when expanded.
<Accordion title="Default Accordion">
<p>This is the content revealed when expanded.</p>
</Accordion>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Accordion summary or heading text. |
| id | string | - | HTML id for the accordion (for accessibility). |
| description | string | - | Optional description below the title. |
| children | ReactNode | - | Content to display inside the expanded accordion. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme of the accordion. |
| state | "" | "success" | "error" | "warning" | - | Visual state for semantic meaning (success, warning, error). |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow effect for the accordion container. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Corner radius of the accordion container. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Overall size of the accordion. |
| initiallyExpanded | boolean | false | If true, accordion is expanded by default. |
| expanded | boolean | - | Manually control expanded state (controlled mode). |
| outline | boolean | false | Show outline border style. |
| disabled | boolean | false | Disable interaction and dim the accordion. |
| isToggleable | boolean | true | If false, accordion cannot be collapsed. |
| asyncContent | boolean | false | Simulate async content loading when expanded. |
| lazyLoad | boolean | false | Only render children when expanded. |
| iconPosition | "left" | "right" | "right" | Position of expand/collapse icon. |
| customExpandedIcon | string | - | Custom icon to show when expanded. |
| customCollapsedIcon | string | - | Custom icon to show when collapsed. |
| className | string | - | Custom CSS class for styling. |
| onToggle | (expanded: boolean) => void | - | Callback fired when expanded/collapsed state changes. |
| data-testid | string | "accordion" | Test ID for test automation. |