Combobox

A filterable select with typeahead.

import { BuiCombobox } from 'ng-blatui';

<bui-combobox [(value)]="framework" [options]="frameworks" />
// frameworks = [{ value: 'ng', label: 'Angular' }, ...]

Preselected

<bui-combobox [value]="'ng'" [options]="frameworks" />

Disabled

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

Statuses

<!-- ComboboxOption now takes an optional icon (SVG path d) -->
<bui-combobox [options]="statuses" placeholder="Set status…" />
// statuses = [{ value: 'todo', label: 'Todo', icon: 'M12 22a10…' }, …]

Non-searchable

<!-- [searchable]="false" makes it open the full list like a select -->
<bui-combobox [options]="opts" [searchable]="false" placeholder="Pick one" />

Multiple

<!-- [multiple]="true" binds an array via [(values)]; toggles, stays open, checks -->
<bui-combobox [multiple]="true" [(values)]="picked" [options]="frameworks" />
// picked = signal<string[]>([])

API reference

Inputs

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	Select several options; binds `values` instead of `value`.
`options`	`readonly ComboboxOption[]`	`[]`	Available options to filter and choose from.
`placeholder`	`string`	`'Search…'`	Placeholder text shown in the search input.
`searchable`	`boolean`	`true`	When false, the field can't be typed in — it just opens the full list (select-like).

Two-way models

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

Prop	Type	Default	Description
`value`	`string`	`''`	Selected option value (single mode). Two-way bindable with `[(value)]`.
`values`	`readonly string[]`	`[]`	Selected option values (multiple mode). Two-way bindable with `[(values)]`.
`disabled`	`boolean`	`false`	Whether the combobox is disabled. Two-way bindable with `[(disabled)]`.

Types

ComboboxOption

Field	Type	Description
`value`	`string`	Value stored when this option is selected.
`label`	`string`	Text shown and matched against the search query.
`icon`?	`string`	Optional leading icon, given as an SVG path `d` string.

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