Imports

Import the wrapper when you want the standard searchable single-select experience.

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

Basic usage

<tng-autocomplete> exposes query text and renders the option list you pass in. Compute local results in the parent, or replace that computed list with server results.

<tng-autocomplete
  [options]="filteredCountries()"
  [value]="selectedCountry()"
  (valueChange)="onSelectedCountryChange($event)"
  [query]="countryQuery()"
  (queryChange)="countryQuery.set($event)"
  [getOptionValue]="getCountryValue"
  [getOptionLabel]="getCountryLabel"
  placeholder="Search countries"
  [ariaLabel]="'Country directory'"
></tng-autocomplete>

Accessibility baseline

• The wrapper renders a real input with combobox semantics from the primitive foundation.
• Arrow keys move the active option; Enter commits the current option.
• Tab leaves the autocomplete because the listbox keeps focus scoped to the trigger.
• Use the headless primitive if you need create mode, strict mode, or custom option markup.