Collapsible overview

Headless collapsible is a minimal disclosure contract. It gives you a root, a trigger, and a content region with stable state hooks, while leaving state ownership, projected content, and visual treatment to your markup.

import {
  TngCollapsible,
  TngCollapsibleTrigger,
  TngCollapsibleContent,
} from '@tailng-ui/primitives';

Basic composition

Drive open from your own signal or input, wire the trigger to the content with contentId, and render any structure inside the content region.

<section tngCollapsible [open]="detailsOpen()">
  <button
    tngCollapsibleTrigger
    [open]="detailsOpen()"
    [contentId]="detailsContentId"
    (click)="detailsOpen.set(!detailsOpen())"
  >
    Release checklist
  </button>

  <ol
    tngCollapsibleContent
    [id]="detailsContentId"
    [open]="detailsOpen()"
    aria-label="Release checklist"
  >
    <li>Draft</li>
    <li>Review</li>
    <li>Publish</li>
  </ol>
</section>

Accessibility baseline

• The trigger stays a real button and reflects aria-expanded.
• Provide a stable content id so aria-controls points to the owned region.
• The content region toggles with hidden when closed.
• Any step semantics, current-state copy, or status announcements are owner-authored.