ComponentAccordion
Expandable panels with smooth animation. Supports multiple mode, disabled panels and complete ARIA accessibility.
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.
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 },
];
}
