Component

Select

A dropdown select with single or multiple choice. Feed options as data or declare grouped items, filter and virtualise long lists, show chips or a summary, size and colour the trigger, and drive it as a form control.

Options & value

Selected: —

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbSelectImports, type HbSelectOption } from '@herbst/ui';

@Component({
  selector: 'hb-demo-select-basic',
  imports: [HbSelectImports],
  template: `
    <div class="flex w-full max-w-xs flex-col gap-2">
      <hb-select
        hbFluid
        hbClearable
        [hbOptions]="options"
        [(hbValue)]="family"
        hbPlaceholder="Pick a city"
      />
      <p class="font-mono text-[12px] text-muted-foreground">Selected: {{ family() ?? '—' }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSelectBasicComponent {
  protected readonly family = signal<unknown>(null);
  protected readonly options: HbSelectOption[] = [
    { value: 'freiburg', label: 'Freiburg' },
    { value: 'munich', label: 'Munich' },
    { value: 'berlin', label: 'Berlin' },
    { value: 'hamburg', label: 'Hamburg', disabled: true },
  ];
}

Declarative groups

Multiple, chips & select-all

2 selected

Filter, status, size & loading

API reference

hb-select — value

Property	Description	Type	Default
[(hbValue)]	The selected value (or array when multiple), two-way bound. Also a form control via ngModel / formControl.	unknown	null
[hbOptions]	The choices as data ({ value, label, disabled? }). Omit to declare hb-select-item children.	HbSelectOption[]	[]
[hbPlaceholder] / [hbClearable]	Empty-state text, and a clear button to reset the value.	string / boolean	'Select...' / false
[hbCompareWith]	Custom equality function used to match values against options (for object values).	(a, b) => boolean	a === b
(hbChange) / (hbOpenChange)	Emit the new value on selection, and true/false as the panel opens and closes.	unknown / boolean	—

hb-select — multiple

Property	Description	Type	Default
[hbMultiple]	Allow selecting several values; hbValue becomes an array.	boolean	false
[hbDisplay] / [hbMaxChips]	Show selections as chips or a comma list, and cap the number of chips before a "+N" badge.	'chip' \| 'comma' / number	'chip' / 2
[hbSelectAll] / [hbSelectionLimit]	Add a "Select all" row, and cap how many values can be chosen (0 = no limit).	boolean / number	false / 0

hb-select — panel

Property	Description	Type	Default
[hbFilter] / [hbFilterMatchMode] / [hbFilterPlaceholder]	Add a search box; match by contains, startsWith, or equals, with a custom placeholder.	boolean / 'contains' \| 'startsWith' \| 'equals' / string	false / 'contains' / 'Search...'
[hbVirtualScroll] / [hbVirtualItemSize] / [hbVirtualHeight]	Virtualise long data lists, setting the row height and viewport height in pixels.	boolean / number	false / 36 / 280
[hbLoading] / [hbLoadingText]	Show a spinner and message in place of the options.	boolean / string	false / 'Loading…'
[hbEmptyMessage] / [hbEmptyOptionsMessage]	Text shown when a filter has no matches, and when there are no options at all.	string	'No results.' / 'No options.'

hb-select — appearance & parts

Property	Description	Type	Default
[hbSize] / [hbStatus]	Trigger height, and validation colour (default \| success \| warning \| error).	size xs–xl / status	'md' / 'default'
[hbDisabled] / [hbReadonly] / [hbInvalid] / [hbRequired]	Standard control states forwarded to the trigger and ARIA.	boolean	false
[hbBorderless] / [hbRing] / [hbFluid]	Drop the border, toggle the focus ring, and stretch to full width.	boolean	false / true / false
parts & templates	hb-select-item, hb-select-group, hb-select-label, hb-select-separator build the panel; ng-template[hbSelectValue] customises the trigger display.	components / template	—