Accordion

Collapsible content sections with smooth height animation. Supports single (one at a time) and multiple modes.

Input	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Single = one item open at a time; Multiple = any number
`collapsible`	`boolean`	`true`	Allow closing all items
`value`	`string \| string[]`	—	Two-way bindable open value(s)
`items`	`NgOatAccordionItem[]`	`[]`	Data-driven items (convenience API)

Output	Type	Description
`toggled`	`{ value: string; open: boolean }`	Emitted when an item is toggled

Composition API (recommended) without underline

Use content projection with <ng-oat-accordion-item> for full control.

Is it accessible?

Yes. It adheres to the WAI-ARIA accordion pattern with proper aria-expanded, aria-controls, and role="region".

Is it styled?

Yes. It uses Oat design tokens so spacing, radius, and colors adapt to your theme configuration.

Is it animated?

Yes. The content height animates smoothly using CSS Grid grid-template-rows — no JavaScript measurement needed.

html

<ng-oat-accordion type="single" [collapsible]="true" [triggerUnderline]="false">
  <ng-oat-accordion-item value="accessible">
    <span accordionTrigger>Is it accessible?</span>
    Yes. It adheres to the WAI-ARIA accordion pattern.
  </ng-oat-accordion-item>
  <ng-oat-accordion-item value="styled">
    <span accordionTrigger>Is it styled?</span>
    Yes. Uses Oat design tokens for theming.
  </ng-oat-accordion-item>
</ng-oat-accordion>

Multiple Open

Set type="multiple" to allow any number of items open simultaneously.

First section

Content for the first section. You can open multiple at once.

Second section

Content for the second section. Try opening this alongside the first.

Third section

Content for the third section. All three can be open.

html

<ng-oat-accordion type="multiple">
  <ng-oat-accordion-item value="item-1">
    <span accordionTrigger>First section</span>
    Content for the first section.
  </ng-oat-accordion-item>
  <!-- ... more items ... -->
</ng-oat-accordion>

Data-driven (legacy)

Pass an array of NgOatAccordionItem for simple use cases.

What is Oat?

A tiny, semantic-first CSS + JS UI library.

What is ng-oat?

An Angular-first integration layer for Oat UI.

Do I need JavaScript?

Only for interactive components (dropdown, tabs, toast). Everything else is pure CSS.

html

<ng-oat-accordion
  [items]="faqItems"
  type="single"
  (toggled)="onToggle($event)" />

Disabled Item

This item works

You can toggle this one normally.

This item is disabled

You should not be able to see this.

html

<ng-oat-accordion type="single">
  <ng-oat-accordion-item value="enabled">
    <span accordionTrigger>This item works</span>
    Toggleable content.
  </ng-oat-accordion-item>
  <ng-oat-accordion-item value="disabled" [disabled]="true">
    <span accordionTrigger>This item is disabled</span>
    Unreachable content.
  </ng-oat-accordion-item>
</ng-oat-accordion>

Default Open

Getting Started

Install ng-oat via npm and add provideNgOat() to your app config.

Configuration

Use provideNgOatTheme() to customize design tokens.

Troubleshooting

Check the browser console for Oat initialization warnings.

html

<ng-oat-accordion type="single" value="getting-started">
  <ng-oat-accordion-item value="getting-started">
    <span accordionTrigger>Getting Started</span>
    Install ng-oat via npm...
  </ng-oat-accordion-item>
</ng-oat-accordion>