docs

Imports

import { TngChipsComponent } from '@tailng-ui/components';
import { TngChip, TngChipRemove } from '@tailng-ui/primitives';

Basic usage

<tng-chips
  [values]="selectedTopics()"
  (valuesChange)="onSelectedTopicsChange($event)"
  [ariaLabel]="'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>
</tng-chips>

Chip variants

The wrapper keeps the root shell and controlled value model while projected primitives still own chip and remove behavior.

Selected topics (Plain-CSS)

Selected topics

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

AccessibilityFormsRelease notes

Selected: Accessibility, Forms, Release notes

Behavior baseline

The wrapper forwards ariaLabel, disabled, and the controlled values array to the primitive root.
Projected tngChip and tngChipRemove directives still own keyboard removal, focus hooks, and remove labels.
Use the wrapper when you want a styled root shell; drop to headless when you need to own the root DOM outright.

Imports

Styled component imports

Basic usage

Wrapper attachment

Chip variants

Selected topics (Plain-CSS)

Selected surfaces (Tailwind CSS)

Behavior baseline