CONTENTBETA

Accordion

Data-driven or fully composable disclosure groups with controlled Signals state, deterministic ARIA relationships and complete visual ownership.

Native buttonsSSR safeHeadless ready

GET STARTED

Import

Use the concise canonical class names from the granular entry point. Import only the declarations your template uses.

import {
  NeuralAccordion,
  NeuralAccordionPanel,
  NeuralAccordionHeader,
  NeuralAccordionContent,
} from '@neural-ng/core/accordion';

@Component({
  imports: [
    NeuralAccordion,
    NeuralAccordionPanel,
    NeuralAccordionHeader,
    NeuralAccordionContent,
  ],
})

Data-driven FAQ

Property mappings turn immutable object arrays into concise text panels. Disabled items remain visible and cannot be expanded.

The controlled value remains deterministic for humans, agents and SSR.

No panel event yet.

Projected composition

Panel, header and content declarations accept arbitrary Angular content. Do not combine projected panels with a non-empty data array.

Controlled stateThe model can be shared with routes, stores and generated interfaces.

Multiple panels

In multiple mode the controlled value is an array and each enabled panel toggles independently.

Standalone declarations and Signals state.

Non-collapsible single mode

Set collapsible=false when one single-mode panel must always remain expanded. It has no effect in multiple mode.

Clicking the active header cannot collapse the final open panel.

Disabled group and panel

Disable the entire group or only one projected panel. Disabled headers use native button state and keyboard navigation skips them.

Disabled panel

Disabled group

Controlled model and semantic event

valueChange powers two-way binding. panelChange adds panel identity, expanded state, previous/next model and keyboard or pointer source.

panelChanged(event: NeuralAccordionPanelChange): void {
  console.log(event.panelValue, event.expanded);
  console.log(event.previousValue, event.value, event.source);
}

Unstyled and typed slots

Unstyled mode preserves disclosure semantics, inert collapsed content, focus movement and structural hooks while Tailwind owns every visible class.

NeuralNg owns behavior; consumer classes own presentation.

Resolution rules and intentional boundaries

Data content is escaped plain text. itemValue must resolve to a unique string or number; invalid values fall back to the stable render index and duplicate values produce a development warning.

Use either [items] or projected panels. When both are present, data items are authoritative and development mode reports the mixed source.

Local unstyled and application-wide provideNeuralNg({ unstyled: true }) preserve the same structural, keyboard and ARIA contract. Programmatic model writes update expansion without emitting the user-only panelChange.

Remote loading, errors and rich content belong inside projected panels. The Beta contract does not pretend to lazy-instantiate collapsed templates; a future lazy API will require an explicit lifecycle contract.

ACCESSIBILITY

Accessible disclosure groups

No custom role imitates a button; every header trigger is a real native button.

Semantics and relationships

Headers expose aria-expanded and aria-controls. Content regions use aria-labelledby; collapsed content is both aria-hidden and inert.

Keyboard

Enter and Space use native button activation. Arrow Down/Up wrap between enabled headers. Home and End focus the first and last enabled header.

Focus

Toggling content never steals focus. Disabled headers leave navigation and deterministic SSR-safe IDs preserve relationships through hydration.

Motion

Content and chevron transitions use component tokens and collapse to effectively immediate changes under prefers-reduced-motion.

PUBLIC CONTRACT

Accordion API

Accordion inputs

Name	Type	Default	Purpose
items	readonly TItem[]	[]	Data-driven panel source.
itemLabel	string	'label'	Header text property.
itemValue	string	'value'	Unique string/number value property.
itemContent	string	'content'	Plain-text body property.
itemDisabled	string	'disabled'	Per-item disabled property.
value	NeuralAccordionModelValue	null	Controlled single or multiple model.
multiple	boolean	false	Allows several expanded panels.
collapsible	boolean	true	Allows the active single panel to close.
disabled	boolean	false	Disables the whole group.
accordionId	string	generated	Stable ARIA id prefix.
unstyled	boolean	false	Removes NeuralNg visual classes.
accordionClass	string	''	Additive root class.
classes	NeuralAccordionClasses	{}	Typed visual slot classes.

Outputs

valueChangeNeuralAccordionModelValue

Generated model output.

panelChangeNeuralAccordionPanelChange

User-only expanded/collapsed event with source and previous state.

Panel API

value	NeuralAccordionValue	required	Panel identity.
disabled	boolean	false	Disables one projected panel.
panelClass	string	''	Additive projected panel class.

Header and content API

NeuralAccordionHeader.headerClassstring · ''

NeuralAccordionHeader.triggerClassstring · ''

NeuralAccordionContent.contentClassstring · ''

Typed class slots

rootpanelexpandedPaneldisabledPanelheadertriggerlabeliconcontentcontentInner

DESIGN TOKENS

Accordion tokens

Neutral tokens respond to the selected primary palette, surface palette and resolved light/dark mode without changing the component contract.

--neural-accordion-gap

Spacing between component items.

--neural-accordion-color

Component foreground color.

--neural-accordion-font-family

Component font family.

--neural-accordion-panel-background

Panel background surface.

--neural-accordion-panel-background-expanded

Expanded panel background surface.

--neural-accordion-panel-border

Panel border shorthand.

--neural-accordion-panel-border-color-expanded

Expanded panel border color.

--neural-accordion-panel-radius

Panel corner radius.

--neural-accordion-panel-shadow

Panel box shadow.

--neural-accordion-panel-shadow-expanded

Expanded panel box shadow.

--neural-accordion-panel-transition

Panel CSS transition.

--neural-accordion-trigger-padding

Trigger internal spacing.

--neural-accordion-trigger-gap

Spacing between trigger items.

--neural-accordion-trigger-color

Trigger foreground color.

--neural-accordion-trigger-color-hover

Hovered trigger foreground color.

--neural-accordion-trigger-color-expanded

Expanded trigger foreground color.

--neural-accordion-trigger-background

Trigger background surface.

--neural-accordion-trigger-background-hover

Hovered trigger background surface.

--neural-accordion-trigger-background-expanded

Expanded trigger background surface.

--neural-accordion-trigger-font-size

Trigger font size.

--neural-accordion-trigger-font-weight

Trigger font weight.

--neural-accordion-trigger-line-height

Trigger line height.

--neural-accordion-trigger-transition

Trigger CSS transition.

--neural-accordion-content-padding

Content internal spacing.

--neural-accordion-content-color

Content foreground color.

--neural-accordion-content-font-size

Content font size.

--neural-accordion-content-line-height

Content line height.

--neural-accordion-content-duration

Content animation duration.

--neural-accordion-content-easing

Content animation easing curve.

--neural-accordion-icon-size

Icon width and height.

--neural-accordion-icon-color

Icon foreground color.

--neural-accordion-icon-color-expanded

Expanded icon foreground color.

--neural-accordion-icon-duration

Icon animation duration.

--neural-accordion-icon-easing

Icon animation easing curve.

--neural-accordion-focus-ring

Component keyboard focus ring.

--neural-accordion-focus-ring-offset

Component focus ring offset.

--neural-accordion-disabled-opacity

Disabled opacity.

Primary

Surface

Accordion

Import

Data-driven FAQ

Projected composition

Multiple panels

Non-collapsible single mode

Disabled group and panel

Controlled model and semantic event

Unstyled and typed slots

Resolution rules and intentional boundaries

Accessible disclosure groups

Semantics and relationships

Keyboard

Focus

Motion

Accordion API

Accordion inputs

Outputs

Panel API

Header and content API

Typed class slots

Accordion tokens

Import

Data-driven FAQ

Why does Accordion use Signals?

Can every visual class be removed?

Can a panel stay visible but unavailable?

Projected composition

Signals architecture

Headless ownership

Multiple panels

Architecture

Accessibility

Design tokens

Non-collapsible single mode

Always one open

Alternative panel

Disabled group and panel

Available

Locked

Account

Controlled model and semantic event

Unstyled and typed slots

Semantic core

Typed classes

Resolution rules and intentional boundaries

Semantics and relationships

Keyboard

Focus

Motion

Accordion inputs

Outputs

Panel API

Header and content API

Typed class slots