Accordion

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

Usage & Examples

Default

This is the content revealed when expanded.

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

Props API

31 props
Columns
Accordion props API
Default
Description
aria-describedbystringNoaria—ID reference for describing the accordion toggle button. This can supplement or replace the generated description ID.
aria-labelstringNoaria—Accessible label for the accordion toggle button. Useful when the visible title is not descriptive enough.
aria-labelledbystringNoaria—ID reference for labeling the accordion toggle button. Prefer this when an external visible label already exists.
asyncContentbooleanNopropsfalseIf true, the accordion content is loaded asynchronously.
childrenReactNodeNoprops—The content to display when the accordion is expanded.
classNamestringNostyling—Additional custom class names for the wrapper element.
customCollapsedIconReactNodeNoprops—Custom icon to display when the accordion is collapsed.
customExpandedIconReactNodeNoprops—Custom icon to display when the accordion is expanded.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultExpandedbooleanNopropsfalseIf true, the accordion is initially expanded (uncontrolled mode).
descriptionstringNoprops—Accessible description. This can be announced to assistive technologies via aria-describedby.
disableCollapsebooleanNopropsfalseIf true, the accordion can be opened but cannot be collapsed by user action.