Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Imports

Headless Chips is built from a small primitive set: the list root, the chip item, and the remove control.

chips.imports.ts

ts
import { TngChip, TngChipRemove, TngChips } from '@tailng-ui/primitives';

Basic usage

Attach tngChips to the list root, then project a removable chip body for each value you want to render.

chips.basic-usage.html

html
<section
  tngChips
  [tngChipsValues]="selectedTopics()"
  (valuesChange)="onSelectedTopicsChange($event)"
  [tngChipsAriaLabel]="'Selected topics'"
>
  <div class="topic-chip-row">
    @for (topic of selectedTopics(); track topic) {
      <span tngChip [tngChipValue]="topic" [tngChipLabel]="topic" class="topic-chip-pill">
        <span>{{ topic }}</span>
        <button tngChipRemove type="button" class="topic-chip-remove">&times;</button>
      </span>
    }
  </div>
</section>

Chip variants

The primitive contract stays the same whether you wrap it in a plain-CSS shell or a Tailwind shell.

Selected topics (Plain-CSS)

Selected topics

Primitive-first removable chips with a light shell and a controlled value array.

AccessibilityFormsRelease notes

Selected: Accessibility, Forms, Release notes

Behavior baseline

The root reflects role="list" and data-slot="chips". Each chip reflects role="listitem" and data-slot="chip", so your styling hooks stay stable.

Use Delete or Backspace on a focused chip to remove it, or Enter / Space on the remove control when removal is allowed. Disabled roots and disabled chips block those actions without extra glue code.