Form

Autocomplete

A text field with suggestions — free text or a forced choice, one value or chips, from a server or a local list.

Features10

API

Theming

Basic

Suggestions while you type: completed gets the query, you set suggestions. Any text stays the value.

Value: —

9 lines

<div class="stack">  <tx-autocomplete    [suggestions]="suggestions()"    [formControl]="fruit"    [placeholder]="'Fruit'"    (completed)="search($event)"  />  <span class="hint">Value: {{ fruit.value ?? '—' }}</span></div>

Dropdown

A combobox: the button lists every suggestion and localSearch narrows them as you type.

Value: pieces

11 lines

<div class="stack">  <tx-autocomplete    [suggestions]="units"    [formControl]="unit"    [dropdown]="true"    [localSearch]="true"    [delay]="0"    [placeholder]="'Unit'"  />  <span class="hint">Value: {{ unit.value ?? '—' }}</span></div>

Force selection

With forceSelection only a suggestion can be the value; other text is cleared when you leave the field.

Value: —

15 lines

<div class="stack">  <tx-autocomplete    [suggestions]="countries"    [formControl]="country"    [optionLabel]="'name'"    [optionValue]="'code'"    [localSearch]="true"    [filterMatchMode]="'startsWith'"    [forceSelection]="true"    [autoOptionFocus]="true"    [delay]="0"    [placeholder]="'Country'"  />  <span class="hint">Value: {{ country.value ?? '—' }}</span></div>

Multiple

multiple collects chips; Backspace in an empty field removes the last one.

olena@example.com

8 lines

<tx-autocomplete    [suggestions]="suggestions()"    [formControl]="recipients"    [multiple]="true"    [delay]="100"    [placeholder]="'Recipients'"    (completed)="search($event)"  />

Server

A server search: loading while the request runs, delay between keystrokes and minLength before the first request.

10 lines

<tx-autocomplete    [suggestions]="results()"    [optionLabel]="'name'"    [optionValue]="'name'"    [loading]="loading()"    [minLength]="2"    [delay]="300"    [placeholder]="'Repository — type 2 letters'"    (completed)="search($event)"  />

Template

Own suggestion markup with txSelectOption, e.g. an icon before the text.

15 lines

<tx-autocomplete  [suggestions]="commands"  [optionLabel]="'label'"  [optionValue]="'id'"  [localSearch]="true"  [delay]="0"  [placeholder]="'Command'">  <ng-template txSelectOption let-command>    <span class="command">      <tx-icon [name]="command.icon" />      {{ command.label }}    </span>  </ng-template></tx-autocomplete>

Groups

Suggestions in named groups.

10 lines

<tx-autocomplete    [suggestions]="cars"    [group]="true"    [optionGroupLabel]="'brand'"    [optionGroupChildren]="'models'"    [localSearch]="true"    [dropdown]="true"    [delay]="0"    [placeholder]="'Model'"  />

States

Sizes, filled variant, invalid, disabled and read-only.

22 lines

<div class="stack">  <tx-autocomplete    [suggestions]="tags"    [localSearch]="true"    [size]="'small'"    [placeholder]="'Small'"  />  <tx-autocomplete    [suggestions]="tags"    [localSearch]="true"    [variant]="'filled'"    [placeholder]="'Filled'"  />  <tx-autocomplete [suggestions]="tags" [invalid]="true" [placeholder]="'Invalid'" />  <tx-autocomplete [suggestions]="tags" [formControl]="locked" [ariaLabel]="'Disabled'" />  <tx-autocomplete    [suggestions]="tags"    [formControl]="shown"    [readonly]="true"    [ariaLabel]="'Read only'"  /></div>

Design tokens

dt changes the select tokens of one autocomplete.

8 lines

<tx-autocomplete    [suggestions]="tags"    [multiple]="true"    [localSearch]="true"    [delay]="0"    [placeholder]="'Tags'"    [dt]="{ chip: { borderRadius: '999px' }, option: { borderRadius: '999px' } }"  />

Pass through

Your classes and styles on inner parts.