Select

An accessible select (combobox + listbox).

import { BuiSelect } from 'ng-blatui';

<bui-select [(value)]="fruit" [options]="fruits" placeholder="Pick a fruit" />
// fruits = [{ value: 'apple', label: 'Apple' }, ...]

Disabled

<bui-select [options]="fruits" [disabled]="true" placeholder="Disabled" />

Scrollable

<!-- long lists scroll inside the popover -->
<bui-select [(value)]="timezone" [options]="timezones" placeholder="Select a timezone" />

Sizes

<!-- size the trigger via an arbitrary child selector -->
<bui-select class="[&>button]:h-8 [&>button]:text-xs" [options]="opts" placeholder="Small" />
<bui-select class="[&>button]:h-11" [options]="opts" placeholder="Large" />

Options array

<bui-select [(value)]="tz" [options]="timezones" placeholder="Timezone" />
// timezones = [{ value: 'utc', label: 'UTC' }, …]

Branded

<bui-select class="[&>button]:border-primary [&>button]:text-primary" [options]="opts" />

Native

<select aria-label="Fruit" class="h-9 rounded-md border border-input bg-transparent px-3 text-sm">
  <option>Apple</option><option>Banana</option>
</select>

Utility class

<!-- a native select styled entirely with utility classes -->
<select aria-label="Plan" class="h-9 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">…</select>

With icons

<!-- SelectOption now takes an optional icon (SVG path d) -->
<bui-select [options]="opts" placeholder="Account" />
// opts = [{ value: 'profile', label: 'Profile', icon: 'M19 21v-2a4 4…' }, …]

Grouped

<!-- consecutive options sharing a group get a header -->
<bui-select [options]="opts" />
// opts = [{ value: 'apple', label: 'Apple', group: 'Fruits' }, { value: 'carrot', label: 'Carrot', group: 'Vegetables' }]

Multiple

<!-- [multiple]="true" binds an array via [(values)]; stays open, toggles, shows checks -->
<bui-select [multiple]="true" [(values)]="picked" [options]="opts" placeholder="Pick fruits" />
// picked = signal<string[]>([])

Reactive form

Control value: banana

<!-- bui-select implements ControlValueAccessor → works with Reactive,
     Template (ngModel) and Signal forms -->
import { ReactiveFormsModule, FormControl } from '@angular/forms';

fruitForm = new FormControl('banana');

<bui-select [formControl]="fruitForm" [options]="opts" />

API reference

Inputs

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	Select several options; binds `values` instead of `value`.
`options`	`readonly SelectOption[]`	`[]`	Available options to choose from.
`placeholder`	`string`	`'Select…'`	Text shown on the trigger when nothing is selected.
`aria-label`	`string`	`''`	Accessible name for the combobox. Bound from a plain `aria-label="…"` on the host (consumed as an input, so it's applied to the inner combobox button rather than left as a prohibited ARIA attribute on the custom element).

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 select is disabled. Two-way bindable with `[(disabled)]`.

Types

SelectOption

Field	Type	Description
`value`	`string`	Value stored when this option is selected.
`label`	`string`	Text shown for this option.
`disabled`?	`false \| true`	Whether this option cannot be selected.
`icon`?	`string`	Optional leading icon, given as an SVG path `d` string.
`group`?	`string`	Optional group label; consecutive options sharing a group get a header.

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