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
| Type | Description | |
|---|---|---|
| aria-describedby | string | ID reference for describing the accordion toggle button. This can supplement or replace the generated description ID. |
| aria-label | string | Accessible label for the accordion toggle button. Useful when the visible title is not descriptive enough. |
| aria-labelledby | string | ID reference for labeling the accordion toggle button. Prefer this when an external visible label already exists. |
| asyncContent | boolean | If true, the accordion content is loaded asynchronously. |
| children | ReactNode | The content to display when the accordion is expanded. |
| className | string | Additional custom class names for the wrapper element. |
| customCollapsedIcon | ReactNode | Custom icon to display when the accordion is collapsed. |
| customExpandedIcon | ReactNode | Custom icon to display when the accordion is expanded. |
| data-testid | string | Optional test ID for testing frameworks. |
| description | string | Accessible description. This can be announced to assistive technologies via aria-describedby. |
| disabled | boolean | If true, disables user interaction and styles the accordion as disabled. |
| expanded | boolean | If set, enables controlled mode. Determines whether the accordion is expanded. |
| iconPosition | "left" | "right" | Position of accordion toggle icon. |
| id | string | Optional custom ID for the accordion content section. If not provided, a unique ID will be generated. |
| initiallyExpanded | boolean | If true, the accordion is initially expanded (uncontrolled mode). |
| isToggleable | boolean | If true, the accordion can be toggled open or closed. If false, the accordion is always expanded. |
| lazyLoad | boolean | If true, the accordion content will be loaded lazily. |
| loadingAriaLabel | string | Announces loading state for assistive technologies when async content is enabled. |
| onToggle | ((expanded: boolean) => void) | Callback triggered when the accordion header is toggled. Receives the new expanded state. |
| outline | boolean | If true, applies an outline style to the accordion. |
| regionAriaDescribedBy | string | ID reference for describing the content region. |
| regionAriaLabel | string | Accessible label for the expanded content region. Usually not needed if ariaLabelledBy/aria-labelledby is already sufficient. |
| regionAriaLabelledBy | string | ID reference for labeling the content region. Overrides the default button-based relationship when needed. |
| role | React.AriaRole | Optional role override for the outer wrapper. Leave undefined in most cases. |
| rounding | RoundingType | Controls the rounding of the accordion. |
| shadow | ShadowType | Controls the shadow of the accordion. |
| size | SizeType | The size of the accordion. |
| state | StateType | The state of the accordion ('success' | 'error' | 'warning'). |
| theme | ThemeType | The theme color of the accordion. |
| title | string | The title text displayed in the accordion header. |