docs

Overview API Styling Examples

Imports

import { TngMultiAutocompleteComponent } from '@tailng-ui/components';

Basic usage

<tng-multi-autocomplete
  [options]="filteredMarkets()"
  [value]="selectedMarkets()"
  (valueChange)="onSelectedMarketsChange($event)"
  [query]="marketQuery()"
  (queryChange)="marketQuery.set($event)"
  [getOptionValue]="getMarketValue"
  [getOptionLabel]="getMarketLabel"
  placeholder="Search launch markets"
  [ariaLabel]="'Launch markets'"
></tng-multi-autocomplete>

Style variants

The wrapper API stays the same across plain CSS and Tailwind shells.

Launch markets (Plain-CSS)

Launch markets

Wrapper-first multi selection with visible chips and a controlled value array.

IndiaJapan

Selected: India, Japan

Behavior baseline

The wrapper exposes query text while the parent passes the option list to render.
Selected chips stay visible and removable while parent-owned filtering narrows the overlay list.
Use the headless primitive when you need custom trigger or overlay markup.