Autocomplete

A free-text input with suggestions.

import { BuiAutocomplete } from 'ng-blatui';

<bui-autocomplete [(value)]="value" [options]="frameworks" />

Disabled

<bui-autocomplete [options]="frameworks" [disabled]="true" placeholder="Disabled" />

With label

<div buiField>
  <label buiFieldLabel for="fw">Framework</label>
  <bui-autocomplete id="fw" [options]="opts" />
</div>

Sizes

<!-- size = sm | default | lg -->
<bui-autocomplete [options]="opts" size="sm" />
<bui-autocomplete [options]="opts" size="lg" />

With icon

<!-- icon = an SVG path d string (leading icon) -->
<bui-autocomplete [options]="opts" icon="m21 21-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />

Multiple

Angular Svelte

<!-- [multiple]="true" → removable chips, Backspace removes last, picked are filtered out -->
<bui-autocomplete [multiple]="true" [(values)]="picked" [options]="opts" />
// picked = signal<string[]>([])