Select

import { BuiSelect } from 'ng-blatui';

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

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

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

<!-- 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" />

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

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

<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>

<!-- 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>

<!-- 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…' }, …]

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

<!-- 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" />