Accordion

Accordion

The Accordion component is a collapsible disclosure component that shows or hides content panels one-to-one with headers.

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

yarn

yarn add @aetherui-kit/core

Basic Usage

<ae-accordion>
<ae-accordion-item header-id="section-1">
  <span slot="header">Section 1</span>
  <p>Content for section 1</p>
</ae-accordion-item>
<ae-accordion-item header-id="section-2">
  <span slot="header">Section 2</span>
  <p>Content for section 2</p>
</ae-accordion-item>
</ae-accordion>

Multi-selectable

<ae-accordion multiselectable>
<ae-accordion-item header-id="multi-1">
  <span slot="header">Section 1</span>
  <p>Content for section 1</p>
</ae-accordion-item>
<ae-accordion-item header-id="multi-2">
  <span slot="header">Section 2</span>
  <p>Content for section 2</p>
</ae-accordion-item>
</ae-accordion>

Default Open

<ae-accordion default-value='["section-1"]'>
<ae-accordion-item header-id="section-1">
  <span slot="header">Section 1</span>
  <p>Content for section 1</p>
</ae-accordion-item>
<ae-accordion-item header-id="section-2">
  <span slot="header">Section 2</span>
  <p>Content for section 2</p>
</ae-accordion-item>
</ae-accordion>

Props

Accordion Props

Name	Type	Default	Description
multiselectable	boolean	false	Allow multiple panels to be open at once
default-value	string[]	[]	Array of header IDs to be open by default
value	string[]	[]	Array of header IDs that are currently open (controlled)

Accordion Item Props

Name	Type	Default	Description
header-id	string	auto-generated	Stable identity used by value and change events
open	boolean	false	Whether the panel is open

Events

Event	Payload	Description
ae-accordion-change	{ value: string[] }	Fired when the open panel identities change
ae-accordion-item-change	{ headerId: string, open: boolean }	Fired by an item when it toggles

The compatibility package also supports the legacy expanded property, headerid attribute, and ae-expand-change event.

Accessibility

The accordion component follows WAI-ARIA guidelines:

• Uses proper ARIA roles (button, region)
• Implements keyboard navigation (Enter/Space to toggle, arrow keys to navigate)
• Maintains proper focus management
• Includes proper ARIA attributes (aria-expanded, aria-controls, aria-labelledby)