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[]>([])

API reference

Inputs

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	Pick several values, shown as removable chips; binds `values`.
`options`	`readonly string[]`	`[]`	Suggestions to filter against the typed text.
`placeholder`	`string`	`'Search...'`	Placeholder text for the input.
`empty`	`string`	`'No results found.'`	Message shown when no suggestion matches.
`name`	`string`	`''`	Native `name` attribute for the input.
`size`	`AutocompleteSize`	`'default'`	Height and font size of the input.
`icon`	`string`	`''`	Optional leading icon, given as an SVG path `d` string.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	Current text in the input. Two-way bindable with `[(value)]`.
`values`	`readonly string[]`	`[]`	Selected values shown as chips (multiple mode). Two-way bindable with `[(values)]`.
`disabled`	`boolean`	`false`	Whether the input is disabled. Two-way bindable with `[(disabled)]`.

Types

AutocompleteSize — Height and font size of the autocomplete input.

"default" | "lg" | "sm"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.