• Docs
  • Components
  • Accordion

Accordion - Aspect UI

The Accordion component allows you to display collapsible content panels that users can expand and collapse individually. It is ideal for organizing large amounts of content into a clean, user-friendly format, such as FAQs, menus, or detailed information sections. Each accordion item includes a trigger (header) and a content panel, supporting smooth transitions and optional control over multiple open panels. The component is fully accessible and customizable, supporting icons, animation, nested items, and more.

Table of Contents#

Default Accordion#

Multiple Open#

Custom Icon#

Accordion Props#

PropTypeDefaultDescription
childrenReactNode-The content of the accordion, typically AccordionItem components
iconEnabledbooleantrueWhether to show toggle icons
iconPositionleft right'right'Position of the toggle icon
iconClassNamestring''Additional CSS class for the icon
activeIconClassNamestring''Additional CSS class for the active state icon
activeItemstring[]-Array of active item IDs (controlled mode)
activeIconReactNode-Custom icon to show when item is expanded
inactiveIconReactNode-Custom icon to show when item is collapsed
multiplebooleanfalseWhether multiple items can be expanded simultaneously
classNamestring''Additional CSS class for the accordion container
labelClassNamestring''Additional CSS class for item labels
activeLabelClassNamestring''Additional CSS class for active item labels
headerClassNamestring''Additional CSS class for item headers
activeHeaderClassNamestring''Additional CSS class for active item headers
contentClassNamestring''Additional CSS class for item content areas
resetbooleanfalseWhether to reset/close all items when this prop changes
...restHTMLAttributes-Any other props will be spread to the root element

Accordion Item Props#

PropTypeDefaultDescription
childrenReactNode-Content inside the accordion item (usually header and content).
idstring-Unique identifier for the accordion item.
disabledbooleanfalseIf true, the item cannot be toggled.
classNamestring''Additional CSS classes for the accordion item.

Accordion Header Props#

PropTypeDefaultDescription
childrenReactNode-The content of the header, typically a label or title.
isOpenbooleanfalseControls whether the accordion item is open.
onToggle() => void-Callback function triggered when the header is clicked.
iconEnabledbooleantrueWhether to show toggle icons.
iconPositionleft right'right'Position of the toggle icon.
iconClassNamestring''Additional CSS class for the icon.
activeIconClassNamestring''Additional CSS class for the active state icon.
activeIconReactNode-Custom icon to display when the item is expanded.
inactiveIconReactNode-Custom icon to display when the item is collapsed.
disabledbooleanfalseDisables the toggle functionality if set to true.
classNamestring''Additional class for the outer wrapper.
labelClassNamestring''Additional class for the label.
activeLabelClassNamestring''Additional class when label is active.
headerClassNamestring''Additional class for the header container.
activeHeaderClassNamestring''Additional class for active header.
resetbooleanfalseWhether to reset when the parent Accordion resets.
tagNameh1 h2 h3 h4 h5 h6 p div button'h2'HTML tag to use for the header element.

Accordion Content Props#

PropTypeDefaultDescription
childrenReactNode-The content to display inside the accordion when expanded.
isOpenbooleanfalseControls whether the content is shown.
classNamestring''Additional CSS classes for the content wrapper.
resetbooleanfalseIf true, resets internal state when the prop changes.