Accordion | Neural UI v2

Usage

Provide items with a stable unique id, title and optional sanitized HTML content. multiple permits several open panels. Bind expandedKeys and accept expandedKeysChange for application-owned state, or omit expandedKeys and use initialExpandedKeys once. Keep that choice for the lifetime of the instance. Header and body Templates receive the item and expanded state.

Examples

Try the behavior and inspect the executable source in Code.

Orders arrive within two working days.

The initial open panel is only a seed. This instance manages subsequent expansion.

Try and configure

Change the options, try the result and inspect its generated template. Open Code for the full implementation.

Orders arrive within two working days.

Expanded: delivery ·

Remove Returns from the model

Multiple panels

Outer border

<neu-accordion
  [items]="items()"
  [multiple]="false"
  [bordered]="true"
  [expandedKeys]="expanded()"
  (expandedKeysChange)="expanded.set($event)"
  (panelToggle)="lastToggle.set($event.id + &quot;: &quot; + $event.expanded)"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const items = signal([
  {
    "id": "delivery",
    "title": "Delivery",
    "content": "Orders arrive within two working days."
  },
  {
    "id": "returns",
    "title": "Returns",
    "content": "Contact support within 30 days."
  },
  {
    "id": "unavailable",
    "title": "Coming soon",
    "disabled": true
  }
]);

export const expanded = signal([
  "delivery"
]);

Data, callback and structured configuration inputs

Data and content

expandedKeysChange proposes the complete open-key array. panelToggle reports the individual user action as { id, expanded }. initialExpandedKeys is not a reactive replacement for applied state.

Accessibility and keyboard

Tab reaches enabled headers. Enter or Space opens or closes a section. Arrow Up/Down, Home and End move header focus, skipping disabled items. Closed content is inert. Keep custom headers free of nested interactive controls.

Key	Action
`Tab`	Reach enabled headers and controls inside open sections.
`ArrowUp / ArrowDown`	Move focus between enabled headers.
`Home`	Focus the first enabled header.
`End`	Focus the last enabled header.
`Enter`	Open or close the focused section.
`Space`	Open or close the focused section.

API

Inputs and Outputs match the pinned Core package. Named types link to their definitions. Templates include executable examples for each supported region.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`bordered`	`boolean`	`true`	`[bordered]`	Draw the outside border.
`expandedKeys`	`readonly K[] \| undefined`	`undefined`	`[expandedKeys]`	Applied open keys; undefined selects uncontrolled mode once.
`initialExpandedKeys`	`readonly K[]`	`[]`	`[initialExpandedKeys]`	One-time open-key seed when expandedKeys is omitted.
`items`	`readonly T[]`	`[]`	`[items]`	Items with stable unique id, title, optional HTML content and disabled flag.
`multiple`	`boolean`	`false`	`[multiple]`	Allow more than one open panel.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`expandedKeysChange`	`readonly K[]`	`(expandedKeysChange)="onExpandedKeysChange($event)"`	Proposes the full array of open keys.
`panelToggle`	`NeuAccordionPanelToggle<K>`	`(panelToggle)="onPanelToggle($event)"`	Reports the toggled item id and expanded state.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`NeuAccordionBodyDirective` Panel body View example	Public template directive (entrypoint) Use let-item and let-expanded="expanded". The header is already a button; place actions inside the body.	`ng-template[neuAccordionBody]` Context used: `$implicit: item, expanded: boolean` template.d.ts `import type { NeuAccordionItem } from '@neural-ui/core/accordion'; import type { NeuAccordionKey } from '@neural-ui/core/accordion'; import { NeuAccordionBodyDirective } from '@neural-ui/core/accordion'; // Public declaration (reference only) export declare class NeuAccordionBodyDirective<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> { }`
`NeuAccordionHeaderDirective` Panel header View example	Public template directive (entrypoint) Use let-item and let-expanded="expanded". The header is already a button; place actions inside the body.	`ng-template[neuAccordionHeader]` Context used: `$implicit: item, expanded: boolean` template.d.ts `import type { NeuAccordionItem } from '@neural-ui/core/accordion'; import type { NeuAccordionKey } from '@neural-ui/core/accordion'; import { NeuAccordionHeaderDirective } from '@neural-ui/core/accordion'; // Public declaration (reference only) export declare class NeuAccordionHeaderDirective<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> { }`

NeuAccordionBodyDirective

Panel body

View example

Public template directive (entrypoint)

Use let-item and let-expanded="expanded". The header is already a button; place actions inside the body.

ng-template[neuAccordionBody]

Context used: $implicit: item, expanded: boolean

Declaration

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

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

// Public declaration (reference only)
export declare class NeuAccordionBodyDirective<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
}

Full context

import type { NeuAccordionBodyContext } from '@neural-ui/core/accordion';

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

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuAccordionBodyContext<T>>;

NeuAccordionHeaderDirective

Panel header

View example

Public template directive (entrypoint)

Use let-item and let-expanded="expanded". The header is already a button; place actions inside the body.

ng-template[neuAccordionHeader]

Context used: $implicit: item, expanded: boolean

Declaration

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

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

// Public declaration (reference only)
export declare class NeuAccordionHeaderDirective<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
}

Full context

import type { NeuAccordionHeaderContext } from '@neural-ui/core/accordion';

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

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuAccordionHeaderContext<T>>;

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Header

NeuAccordionHeaderDirective

Orders arrive within two working days.

Body

NeuAccordionBodyDirective

Orders arrive within two working days.

Requests: 0

Public Types

Open a type to inspect its definition and interface fields.

NeuAccordionBodyContextTypeScript

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

import type { NeuAccordionBodyContext } from '@neural-ui/core/accordion';

// Public declaration (reference only)
export interface NeuAccordionBodyContext<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
  readonly $implicit: T;
  readonly expanded: boolean;
}

NeuAccordionHeaderContextTypeScript

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

import type { NeuAccordionHeaderContext } from '@neural-ui/core/accordion';

// Public declaration (reference only)
export interface NeuAccordionHeaderContext<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
  readonly $implicit: T;
  readonly expanded: boolean;
}

NeuAccordionItemTypeScript

import type { NeuAccordionKey } from '@neural-ui/core/accordion';

import type { NeuAccordionItem } from '@neural-ui/core/accordion';

// Public declaration (reference only)
export interface NeuAccordionItem<K extends NeuAccordionKey = string> {
  readonly content?: string;
  readonly disabled?: boolean;
  readonly id: K;
  readonly title: string;
}

NeuAccordionKeyTypeScript

NeuAccordionPanelToggleTypeScript

import type { NeuAccordionKey } from '@neural-ui/core/accordion';

import type { NeuAccordionPanelToggle } from '@neural-ui/core/accordion';

// Public declaration (reference only)
export interface NeuAccordionPanelToggle<K extends NeuAccordionKey = string> {
  readonly expanded: boolean;
  readonly id: K;
}

Styles and tokens

Use public tokens for surfaces, text, spacing and focus. Test your content in both themes and at narrow widths.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-font-sans`	Text typography	Shared by other Core consumers; scope the override.	`'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
`--neu-radius-lg`	Corner radius	Shared by other Core consumers; scope the override.	`12px`

Related components

Combine these components to build the surrounding interface.