Components / Accordion

Accordion

Single or multiple expandable sections with controlled state.

example.component.html

html

<aevko-accordion [items]="sections" type="multiple" [(value)]="open" />

Installation

npx aevko-ui@latest add accordion --yes

Source ownership

Customization

Tune trigger height, dividers, typography and chevron motion in the installed accordion stylesheet. State and heading semantics remain in the template.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`items`	`readonly AevkoAccordionItem[]`	`required`	Sections identified by a stable id, label and content.
`type`	`'single' \| 'multiple'`	`'single'`	Controls whether one or several sections may stay open.
`value`	`model<readonly string[]>`	`[]`	Ids of the expanded sections; supports two-way binding.
`collapsible`	`boolean`	`true`	Allows the last expanded section to close.
`disabled`	`boolean`	`false`	Disables every accordion trigger.
`id`	`string`	`'aevko-accordion'`	Prefix used to associate triggers and panels.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level rendered for each trigger.

Accessibility contract

Accessibility

Included behavior

Each heading owns a native button with aria-expanded and aria-controls.
Disabled sections stay understandable.

Your responsibility

Choose a headingLevel that follows the page outline and write labels that describe the hidden section.

Back to all components