docs

Accordion overview

Headless accordion gives you section registration, roving trigger focus, and panel visibility semantics without prescribing markup beyond the root, item, trigger, and panel directives.

import {
  TngAccordion,
  TngAccordionItem,
  TngAccordionTrigger,
  TngAccordionPanel,
} from '@tailng-ui/primitives';

Basic composition

Attach tngAccordion to a group root, register each section with tngAccordionItem, and let the trigger and panel coordinate ids and ARIA wiring.

<section tngAccordion aria-label="Workspace FAQ" [defaultValue]="'ownership'">
  <article tngAccordionItem value="ownership">
    <button tngAccordionTrigger type="button">Ownership model</button>
    <div tngAccordionPanel>
      Copy-paste mode keeps wrapper source in your app for long-term ownership.
    </div>
  </article>

  <article tngAccordionItem value="testing">
    <button tngAccordionTrigger type="button">Testing strategy</button>
    <div tngAccordionPanel>
      Primitive suites cover keyboard, pointer, and ARIA behavior.
    </div>
  </article>
</section>

Style variants

The same headless primitive contract rendered through a local CSS shell or a Tailwind utility shell.

Headless accordion (plain CSS)

Ownership model

Copy-paste mode keeps source in your app for long-term ownership.

Test coverage

Accessibility baseline

Triggers reflect aria-expanded, aria-controls, and roving tabindex.
Panels render as role="region" and point back to the owning trigger with aria-labelledby.
Arrow Up, Arrow Down, Home, and End move across enabled triggers.
Use native button triggers when possible so tab order stays natural.

Accordion overview

Primitive imports

Basic composition

Headless accordion composition

Style variants

Headless accordion (plain CSS)

Headless accordion (Tailwind CSS)

Accessibility baseline