Skip to main content
NeuralUIv1.14.3New
GitHub
Component

Accordion

Expandable panels with smooth animation. Supports multiple mode, disabled panels and complete ARIA accessibility.

TypeScript
import { NeuAccordionComponent } from '@neural-ui/core/accordion';

Exclusive (one panel at a time)

NeuralUI is an Angular component library built with Signals, OnPush and URL-synced state, with explicit peer dependencies.
No. NeuralUI is optimised to run with provideExperimentalZonelessChangeDetection() or standard Zone.js.
Yes. All panels implement the required ARIA roles: aria-expanded, aria-controls and role="region".
Yes, add disabled: true to the NeuAccordionItem object. The panel will not respond to clicks or keyboard.

Multiple (several panels open)

NeuralUI is an Angular component library built with Signals, OnPush and URL-synced state, with explicit peer dependencies.
No. NeuralUI is optimised to run with provideExperimentalZonelessChangeDetection() or standard Zone.js.
Yes. All panels implement the required ARIA roles: aria-expanded, aria-controls and role="region".
Yes, add disabled: true to the NeuAccordionItem object. The panel will not respond to clicks or keyboard.

No outer border

NeuralUI is an Angular component library built with Signals, OnPush and URL-synced state, with explicit peer dependencies.
No. NeuralUI is optimised to run with provideExperimentalZonelessChangeDetection() or standard Zone.js.
Yes. All panels implement the required ARIA roles: aria-expanded, aria-controls and role="region".
Yes, add disabled: true to the NeuAccordionItem object. The panel will not respond to clicks or keyboard.
TypeScript
import { NeuAccordionComponent, NeuAccordionItem } from '@neural-ui/core/accordion';

@Component({
  imports: [NeuAccordionComponent],
  template: `<neu-accordion [items]="items" [multiple]="true" />`
})
export class MyComponent {
  items: NeuAccordionItem[] = [
    { id: '1', title: 'Section 1', content: 'Content for section 1', expanded: true },
    { id: '2', title: 'Section 2', content: 'Content for section 2' },
    { id: '3', title: 'Disabled',  content: '...', disabled: true },
  ];
}