Primitives

Accordion

A stack of collapsible sections, optionally allowing multiple panels open at once.

forty-cdk/accordion WAI-ARIA APG

Open a panel with the pointer or Enter, move between headers with the arrow keys, and watch data-state flip on the item, its trigger and its content together.

Source

A library of headless UI primitives with built-in WAI-ARIA accessibility.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
  ForAccordion,
  ForAccordionContent,
  ForAccordionItem,
  ForAccordionTrigger,
} from 'forty-cdk/accordion';

interface AccordionEntry {
  readonly value: string;
  readonly title: string;
  readonly body: string;
}

@Component({
  selector: 'app-accordion-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForAccordion, ForAccordionItem, ForAccordionTrigger, ForAccordionContent],
  template: `
    <div forAccordion class="acc-root" [(value)]="value" collapsible>
      @for (item of items; track item.value) {
        <div forAccordionItem class="acc-item" [value]="item.value">
          <h3 class="acc-heading">
            <button type="button" forAccordionTrigger class="acc-trigger">
              <span>{{ item.title }}</span>
              <span class="chevron" aria-hidden="true"></span>
            </button>
          </h3>
          <section forAccordionContent class="acc-content">
            <div class="acc-inner">
              <p>{{ item.body }}</p>
            </div>
          </section>
        </div>
      }
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .acc-root {
      width: min(460px, 100%);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .acc-item {
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
      overflow: hidden;
    }

    .acc-heading {
      margin: 0;
    }

    .acc-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.8rem 1rem;
      font: inherit;
      font-weight: 600;
      text-align: left;
      color: var(--ex-text, #17191c);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .acc-trigger:hover {
      background: var(--ex-surface-2, #f2eee6);
    }

    .chevron {
      flex: none;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--ex-muted, #585d66);
      border-bottom: 2px solid var(--ex-muted, #585d66);
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .acc-trigger[data-state='open'] .chevron {
      transform: rotate(-135deg);
    }

    .acc-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.25s ease;
    }

    .acc-content[data-state='open'] {
      grid-template-rows: 1fr;
    }

    .acc-inner {
      overflow: hidden;
    }

    .acc-inner p {
      margin: 0;
      padding: 0 1rem 0.9rem;
      color: var(--ex-muted, #585d66);
    }

    @media (prefers-reduced-motion: reduce) {
      .acc-content,
      .chevron {
        transition: none;
      }
    }
  `,
})
export class AccordionDefaultExample {
  protected readonly items: readonly AccordionEntry[] = [
    {
      value: 'a',
      title: 'What is forty-cdk?',
      body: 'A library of headless UI primitives with built-in WAI-ARIA accessibility.',
    },
    {
      value: 'b',
      title: 'Does it ship styles?',
      body: 'No. It exposes state, behavior, focus and ARIA; you apply the styles yourself.',
    },
    {
      value: 'c',
      title: 'Does it work without Zone.js?',
      body: 'Yes, it is designed to run under provideZonelessChangeDetection().',
    },
  ];

  protected readonly value = signal<readonly string[]>(['a']);
}

When to choose

Accordion: a group of collapsible items under one root. [(value)] holds which are open, multiple decides whether more than one may be, and ArrowUp / ArrowDown / Home / End move focus across the triggers.
Disclosure: a single trigger and its region, with no shared state and no arrow-key navigation. Stacking several of them is not an accordion, and that is the right shape when the panels are unrelated.
Tabs: when exactly one panel is ever visible and the panels are alternatives rather than sections the reader may open together.

Anatomy

<div forAccordion>
  <div forAccordionItem value="item-1">
    <h3>
      <button type="button" forAccordionTrigger>Trigger</button>
    </h3>
    <div forAccordionContent>Panel content</div>
  </div>
  <!-- repeat forAccordionItem per section -->
</div>

Examples

Multiple

multiple lets several sections stay open at once, so value holds an array of every open item.

Source

Orders ship within 24 hours and arrive in three to five business days.

Guaranteed next-day delivery for orders placed before 2pm local time.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
  ForAccordion,
  ForAccordionContent,
  ForAccordionItem,
  ForAccordionTrigger,
} from 'forty-cdk/accordion';

interface AccordionEntry {
  readonly value: string;
  readonly title: string;
  readonly body: string;
}

@Component({
  selector: 'app-accordion-multiple-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForAccordion, ForAccordionItem, ForAccordionTrigger, ForAccordionContent],
  template: `
    <div forAccordion class="acc-root" [(value)]="value" multiple>
      @for (item of items; track item.value) {
        <div forAccordionItem class="acc-item" [value]="item.value">
          <h3 class="acc-heading">
            <button type="button" forAccordionTrigger class="acc-trigger">
              <span>{{ item.title }}</span>
              <span class="chevron" aria-hidden="true"></span>
            </button>
          </h3>
          <section forAccordionContent class="acc-content">
            <div class="acc-inner">
              <p>{{ item.body }}</p>
            </div>
          </section>
        </div>
      }
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .acc-root {
      width: min(460px, 100%);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .acc-item {
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
      overflow: hidden;
    }

    .acc-heading {
      margin: 0;
    }

    .acc-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.8rem 1rem;
      font: inherit;
      font-weight: 600;
      text-align: left;
      color: var(--ex-text, #17191c);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .acc-trigger:hover {
      background: var(--ex-surface-2, #f2eee6);
    }

    .chevron {
      flex: none;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--ex-muted, #585d66);
      border-bottom: 2px solid var(--ex-muted, #585d66);
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .acc-trigger[data-state='open'] .chevron {
      transform: rotate(-135deg);
    }

    .acc-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.25s ease;
    }

    .acc-content[data-state='open'] {
      grid-template-rows: 1fr;
    }

    .acc-inner {
      overflow: hidden;
    }

    .acc-inner p {
      margin: 0;
      padding: 0 1rem 0.9rem;
      color: var(--ex-muted, #585d66);
    }

    @media (prefers-reduced-motion: reduce) {
      .acc-content,
      .chevron {
        transition: none;
      }
    }
  `,
})
export class AccordionMultipleExample {
  protected readonly items: readonly AccordionEntry[] = [
    {
      value: 'a',
      title: 'Standard shipping',
      body: 'Orders ship within 24 hours and arrive in three to five business days.',
    },
    {
      value: 'b',
      title: 'Express shipping',
      body: 'Guaranteed next-day delivery for orders placed before 2pm local time.',
    },
    {
      value: 'c',
      title: 'International shipping',
      body: 'Available to most countries; duties and taxes are calculated at checkout.',
    },
  ];

  protected readonly value = signal<readonly string[]>(['a', 'b']);
}

Horizontal

orientation='horizontal' lays the sections out in a row and switches roving navigation to ArrowLeft / ArrowRight. It is reflected as data-orientation for styling.

Source

A summary of the workspace, recent activity and pending invitations.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
  ForAccordion,
  ForAccordionContent,
  ForAccordionItem,
  ForAccordionTrigger,
} from 'forty-cdk/accordion';

interface AccordionEntry {
  readonly value: string;
  readonly title: string;
  readonly body: string;
}

@Component({
  selector: 'app-accordion-horizontal-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForAccordion, ForAccordionItem, ForAccordionTrigger, ForAccordionContent],
  template: `
    <div forAccordion class="acc-root" [(value)]="value" orientation="horizontal" collapsible>
      @for (item of items; track item.value) {
        <div forAccordionItem class="acc-item" [value]="item.value">
          <h3 class="acc-heading">
            <button type="button" forAccordionTrigger class="acc-trigger">
              {{ item.title }}
            </button>
          </h3>
          <section forAccordionContent class="acc-content">
            <div class="acc-inner">
              <p>{{ item.body }}</p>
            </div>
          </section>
        </div>
      }
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .acc-root {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: start;
      gap: 0.5rem;
    }

    .acc-item {
      flex: 1;
      min-width: 0;
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
      overflow: hidden;
    }

    .acc-heading {
      margin: 0;
    }

    .acc-trigger {
      width: 100%;
      padding: 0.8rem 1rem;
      font: inherit;
      font-weight: 600;
      text-align: left;
      color: var(--ex-text, #17191c);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .acc-trigger:hover {
      background: var(--ex-surface-2, #f2eee6);
    }

    .acc-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.25s ease;
    }

    .acc-content[data-state='open'] {
      grid-template-rows: 1fr;
    }

    .acc-inner {
      overflow: hidden;
    }

    .acc-inner p {
      margin: 0;
      padding: 0 1rem 0.9rem;
      color: var(--ex-muted, #585d66);
    }

    @media (prefers-reduced-motion: reduce) {
      .acc-content {
        transition: none;
      }
    }
  `,
})
export class AccordionHorizontalExample {
  protected readonly items: readonly AccordionEntry[] = [
    {
      value: 'overview',
      title: 'Overview',
      body: 'A summary of the workspace, recent activity and pending invitations.',
    },
    {
      value: 'members',
      title: 'Members',
      body: 'Everyone with access, grouped by role. Owners can change permissions here.',
    },
    {
      value: 'billing',
      title: 'Billing',
      body: 'Your current plan, payment method and a link to download past invoices.',
    },
  ];

  protected readonly value = signal<readonly string[]>(['overview']);
}

Disabled item

A disabled item cannot be toggled and is skipped by the arrow keys, while staying in the DOM for screen readers.

Source

Update your display name, email address and avatar.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
  ForAccordion,
  ForAccordionContent,
  ForAccordionItem,
  ForAccordionTrigger,
} from 'forty-cdk/accordion';

interface AccordionEntry {
  readonly value: string;
  readonly title: string;
  readonly body: string;
  readonly disabled: boolean;
}

@Component({
  selector: 'app-accordion-disabled-item-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForAccordion, ForAccordionItem, ForAccordionTrigger, ForAccordionContent],
  template: `
    <div forAccordion class="acc-root" [(value)]="value" collapsible>
      @for (item of items; track item.value) {
        <div forAccordionItem class="acc-item" [value]="item.value" [disabled]="item.disabled">
          <h3 class="acc-heading">
            <button type="button" forAccordionTrigger class="acc-trigger">
              <span>{{ item.title }}</span>
              <span class="chevron" aria-hidden="true"></span>
            </button>
          </h3>
          <section forAccordionContent class="acc-content">
            <div class="acc-inner">
              <p>{{ item.body }}</p>
            </div>
          </section>
        </div>
      }
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .acc-root {
      width: min(460px, 100%);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .acc-item {
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
      overflow: hidden;
    }

    .acc-heading {
      margin: 0;
    }

    .acc-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.8rem 1rem;
      font: inherit;
      font-weight: 600;
      text-align: left;
      color: var(--ex-text, #17191c);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .acc-trigger:hover {
      background: var(--ex-surface-2, #f2eee6);
    }

    .acc-trigger:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .chevron {
      flex: none;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--ex-muted, #585d66);
      border-bottom: 2px solid var(--ex-muted, #585d66);
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .acc-trigger[data-state='open'] .chevron {
      transform: rotate(-135deg);
    }

    .acc-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.25s ease;
    }

    .acc-content[data-state='open'] {
      grid-template-rows: 1fr;
    }

    .acc-inner {
      overflow: hidden;
    }

    .acc-inner p {
      margin: 0;
      padding: 0 1rem 0.9rem;
      color: var(--ex-muted, #585d66);
    }

    @media (prefers-reduced-motion: reduce) {
      .acc-content,
      .chevron {
        transition: none;
      }
    }
  `,
})
export class AccordionDisabledItemExample {
  protected readonly items: readonly AccordionEntry[] = [
    {
      value: 'a',
      title: 'Account',
      body: 'Update your display name, email address and avatar.',
      disabled: false,
    },
    {
      value: 'b',
      title: 'Notifications (coming soon)',
      body: 'This section is disabled, so its trigger is skipped by the arrow keys.',
      disabled: true,
    },
    {
      value: 'c',
      title: 'Privacy',
      body: 'Choose who can see your activity and manage connected applications.',
      disabled: false,
    },
  ];

  protected readonly value = signal<readonly string[]>(['a']);
}

API

`ForAccordion`

Property	Type	Description
`value`	`model`	Currently open item values. In single mode the array has 0 or 1 element. Default: —
`multiple`	`input`	When true, multiple items can be open simultaneously. Default: `false`
`collapsible`	`input`	Single mode only: when true, the open item can be collapsed by clicking it. Otherwise once any item is open, exactly one stays open. Default: `false`
`disabled`	`input`	When true, disables every item: each trigger reflects the native `disabled` attribute and cannot toggle. Composes with a per-item `[disabled]`. Default: `false`
`orientation`	`input`	Layout direction of the trigger list. In horizontal mode ArrowLeft/Right replace ArrowUp/Down. Default: `'vertical'`
`dir`	`input`	Writing direction. Only relevant in horizontal mode, where it swaps the meaning of Left/Right arrows. Default: —

Data attribute	Values
`data-orientation`	`horizontal` \| `vertical`
`data-disabled`	present \| absent

`ForAccordionItem`

Property	Type	Description
`value`	`input.required`	Unique identifier within the accordion. Required. Default: —
`disabled`	`input`	When true, the trigger ignores clicks and exposes the native `disabled` attribute. Default: —

Data attribute	Values
`data-state`	`open` \| `closed`
`data-disabled`	present \| absent
`data-orientation`	`horizontal` \| `vertical`

`ForAccordionTrigger`

Data attribute	Values
`data-state`	`open` \| `closed`
`data-orientation`	`horizontal` \| `vertical`

`ForAccordionContent`

Data attribute	Values
`data-state`	`open` \| `closed`
`data-orientation`	`horizontal` \| `vertical`

Keyboard

Key	Action
`Enter` / `Space`	Toggle the focused trigger (native button).
`ArrowDown` / `ArrowUp`	Move focus between triggers (vertical, default). Wrap-around, skips disabled.
`ArrowLeft` / `ArrowRight`	Move focus between triggers (horizontal, flipped under `dir='rtl'`). Wrap-around, skips disabled.
`Home`	Jump to the first trigger.
`End`	Jump to the last trigger.

Accessibility

Heading wrapper is your job. The library does not render a heading around the trigger, so wrap it in the heading level (<h2>–<h6>) appropriate to your document outline. Without it, screen-reader landmark navigation is broken.
Use a real <button type="button"> for the trigger. Native Enter / Space activation and focus come for free; the directive does not synthesize them.
role="region" is added to every panel automatically. APG recommends suppressing it on accordions with 6+ panels to avoid landmark proliferation; there is currently no opt-out.
Closed panels leave the accessibility tree. While closed, ForAccordionContent sets aria-hidden="true" and inert on the panel, removing it from both the accessibility tree and the focus order. The directive does not apply [hidden], so pick how to hide it visually:
- Mount / unmount with @if (item.expanded()): the panel is absent from the DOM while closed; the cleanest path for animate.enter / animate.leave. The trigger emits aria-controls only while expanded, so the reference never dangles at an unmounted panel.
- Leave it mounted: preserve internal state or run CSS-only transitions off data-state. Add display: none (or your own collapse animation) keyed on [data-state="closed"] to also hide it visually.
aria-disabled is applied to the open trigger only when single mode is active and collapsible=false, indicating the user cannot collapse it from this trigger.
A truly disabled item ([disabled] on [forAccordionItem]) uses the native disabled attribute on the trigger, by design. The trigger is a real single-purpose <button>, not a roving-tabindex collection item (each trigger stays independently in the Tab order; arrow-key navigation is the APG-optional enhancement on top). The disabled trigger leaves the Tab order and the arrow-key navigation (which already skips it), but stays in the accessibility tree so screen readers announce it as unavailable in browse mode. The APG Accordion pattern does not require disabled headers to remain focusable.

Styling

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

.chevron {
  transition: transform 150ms ease;
}

.acc-trigger[data-state='open'] .chevron {
  transform: rotate(180deg);
}

Wrapping in a design system

Subclass the root and re-provide FOR_ACCORDION_CONTEXT with useExisting pointing at the subclass, since Angular does not inherit a directive's providers; Wrapping non-form roots walks the pattern.