Select · Koobiq

KbqSelectLoading

Selector: kbq-select-loading, [kbq-select-loading]

Exported as: kbqSelectLoading

KbqOptionTooltip

Selector: kbq-option

Properties

Name	Description
arrow: boolean	Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.
color: string	Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.
content: string \| TemplateRef	Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.
context: any	Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.
customClass: string	Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.
disabled: boolean	Input (`kbqTooltipDisabled`) controlling whether the tooltip is disabled; setting it to `true` hides it.
enterDelay: number	Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.
forDisabledComponent: InputSignal>>	Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
header: string \| TemplateRef	Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.
hideWithTimeout: boolean	Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
ignoreTooltipPointerEvents: InputSignal	Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
isAttached: boolean	Whether the pop-up overlay is currently attached. Unlike `isOpen`, which follows the visibility of the pop-up component and therefore lags a task behind `show()`/`hide()`, this flips synchronously — it is the window during which the overlay (and its backdrop) is present in the DOM. Part of the {@link KbqSiblingPopup} contract.
isOpen: boolean	Whether the pop-up overlay is currently open.
isOverflown: boolean
leaveDelay: number	Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.
modifier: "default" \| "warning" \| TooltipModifier \| "extended"	Visual variant of the tooltip. Accepts `'default'` \| `'warning'` \| `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).
offset: number	Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.
openedChange: Observable	Emits `true` when the pop-up opens and `false` when it closes. Part of the {@link KbqSiblingPopup} contract.
placementChange: EventEmitter	Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.
relativeToPointer: boolean	Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
singleInstance: InputSignalWithTransform	Whether the tooltip takes part in the "only one tooltip is visible at a time" group: showing it hides the previously visible tooltip, and it is hidden when another tooltip is shown. Defaults to `true`; the default can be changed application-wide with the `KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT` token. Tooltips without an interactive `kbqTrigger` (`manual`, `none`, …) never take part in the group, regardless of this input — they are shown imperatively and are expected to stay pinned.
textElement: HTMLElement
tooltipPlacement: "top" \| "topLeft" \| "topRight" \| "right" \| "rightTop" \| "rightBottom" \| "left" \| "leftTop" \| "leftBottom" \| "bottom" \| "bottomLeft" \| "bottomRight"	Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.
tooltipPlacementPriority: string \| string[]	Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.
tooltipVisible: boolean	Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.
trigger: string	Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.
visibleChange: EventEmitter	Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Name

Description

arrow: boolean

Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.

color: string

Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.

content: string | TemplateRef

Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.

context: any

Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.

customClass: string

Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.

disabled: boolean

Input (`kbqTooltipDisabled`) controlling whether the tooltip is disabled; setting it to `true` hides it.

enterDelay: number

Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.

forDisabledComponent: InputSignal>>

Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.

header: string | TemplateRef

Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.

hideWithTimeout: boolean

Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.

ignoreTooltipPointerEvents: InputSignal

Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.

isAttached: boolean

Whether the pop-up overlay is currently attached. Unlike `isOpen`, which follows the visibility of the pop-up component and therefore lags a task behind `show()`/`hide()`, this flips synchronously — it is the window during which the overlay (and its backdrop) is present in the DOM. Part of the {@link KbqSiblingPopup} contract.

isOpen: boolean

Whether the pop-up overlay is currently open.

isOverflown: boolean

leaveDelay: number

Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.

modifier: "default" | "warning" | TooltipModifier | "extended"

Visual variant of the tooltip. Accepts `'default'` | `'warning'` | `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).

offset: number

Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.

openedChange: Observable

Emits `true` when the pop-up opens and `false` when it closes. Part of the {@link KbqSiblingPopup} contract.

placementChange: EventEmitter

Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.

relativeToPointer: boolean

Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.

singleInstance: InputSignalWithTransform

Whether the tooltip takes part in the "only one tooltip is visible at a time" group: showing it hides the previously visible tooltip, and it is hidden when another tooltip is shown. Defaults to `true`; the default can be changed application-wide with the `KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT` token. Tooltips without an interactive `kbqTrigger` (`manual`, `none`, …) never take part in the group, regardless of this input — they are shown imperatively and are expected to stay pinned.

textElement: HTMLElement

Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.

tooltipPlacementPriority: string | string[]

Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.

tooltipVisible: boolean

Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.

trigger: string

Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.

visibleChange: EventEmitter

Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Methods

handleElementEnter

handleElementLeave

hide

Hides the tooltip after `delay` ms and, when the user has genuinely left the host, un-mutes a tooltip that a pop-up on the same element had muted. `mouseleave` and `blur` are the release signals because the base class binds `hide` to both regardless of whether the tooltip is currently visible. A pop-up that is still attached does not count: its backdrop steals the hover from the trigger while the pointer stands still, and that `mouseleave` must not be mistaken for the user leaving.

show

Shows the tooltip after `delay` ms. Suppresses showing while a pop-up on the same element holds the anchor or on a focus trigger that did not originate from the keyboard, and applies cursor-relative positioning when `relativeToPointer` is enabled.

KbqSelectError

This component renders the error for a Select component. The error message can be displayed in two visual variants: a default centered layout (when [paging] is falsy) or a variant with left‑aligned text suitable for pagination controls (when [paging] is truthy).

Selector: kbq-select-error, [kbq-select-error]

Exported as: kbqSelectError

Properties

Name	Description
@Input() paging: InputSignalWithTransform	Indicates whether styles for pagination controls should be used.

Name

Description

@Input()

paging: InputSignalWithTransform

Indicates whether styles for pagination controls should be used.

KbqSelectErrorText

Marks an element as the error text container for a *KbqSelect* component.

Selector: [kbq-select-error-text]

Exported as: kbqSelectErrorText

KbqSelectNoOptions

Component that represents the empty state of a select dropdown.

Selector: kbq-select-no-options, [kbq-select-no-options]

Exported as: kbqSelectNoOptions

KbqSelect

Selector: kbq-select

Exported as: kbqSelect

Properties

Name	Description
@Input() backdropClass: InputSignal	Classes to be passed to the overlay backdrop.
@Input() compareWith: (o1: any, o2: any) => boolean	Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. Should return true if the values match. Defaults to strict equality comparison.
@Input() disabled: boolean	Whether the select is disabled. When disabled, the select cannot be opened and its value cannot be changed.
@Input() errorStateMatcher: ErrorStateMatcher	Object used to control when error messages are shown.
@Input() hasBackdrop: boolean	Whether the overlay should have a backdrop. When true, clicking the backdrop will close the select.
@Input() hiddenItemsText: string	Template string for hidden items text. Supports {{ number }} placeholder.
@Input() id: string	Unique identifier for the select component. Auto-generates an ID if not provided.
@Input() multiline: InputSignalWithTransform	Whether to use a multiline matcher or not. Default is false. When true, allows multiple lines of text in the selected value display.
@Input() multiple: boolean	Whether multiple options can be selected. Note: This cannot be changed dynamically after initialization.
@Input() panelClass: InputSignal \| { [key: string]: any; }>	Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding.
@Input() panelMaxHeight: InputSignalWithTransform	Maximum height of the panel's scrollable option list, in pixels. Applied as the `--kbq-select-panel-size-max-height` custom property on the panel, so it also drives the pinned height of a `cdk-virtual-scroll-viewport` — with virtual scroll the value is an exact height, not a cap. The search field and the footer sit outside the scrollable area and add to the panel's total height. When null, the token default (256px) applies.
@Input() panelMaxWidth: InputSignalWithTransform	Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes the panel narrower than the trigger, and never clamps an explicit `panelWidth`. When null, the `--kbq-panel-size-width-max` token applies.
@Input() panelMinWidth: InputSignalWithTransform	Minimum width of the panel in pixels. If minWidth is larger than window width, it will be ignored.
@Input() panelWidth: InputSignal	Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
@Input() placeholder: string	Placeholder text to be shown when no value is selected. Displayed in the trigger when the select is closed and no value is selected.
@Input() required: boolean	Whether the select is required. Affects validation and display of placeholder.
@Input() scrolledToBottomOffset: InputSignalWithTransform	Distance in pixels from the bottom of the options panel at which `scrolledToBottom` fires. Default `0` — emits only when the panel is fully scrolled to the bottom.
@Input() searchMinOptionsThreshold: number	Controls when the search functionality is displayed based on the number of available options. Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
@Input() selectAllHandler: (event: KeyboardEvent, select: KbqSelect) => void	Function for handling the Ctrl + A (select all) keyboard combination. By default, the internal handler selects all options.
@Input() selectAllToggle: InputSignalWithTransform	When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects).
@Input() showPreselectedValues: InputSignal	Determines whether preselected values are displayed.
@Input() sortComparator: InputSignal<(a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number>	Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.
@Input() triggerValuesLimit: InputSignal	Specifies the maximum number of trigger values allowed. This constant limits the size of the trigger values array to ensure performance and prevent excessive memory usage. A value of `0` indicates that there is no limit.
@Input() value: any	Value of the select control. Can be a single value or array of values for multiple selection.
@Input() virtualOptionFactory: InputSignal<(value: any) => KbqVirtualOption>	Factory used to construct a `KbqVirtualOption` for selected values whose `KbqOption` is not currently rendered (e.g. virtual scroll out of viewport, programmatically set initial value, `showPreselectedValues`). Required when option values are objects so the trigger (and tags in multiple mode) can render a human-readable label. Also lets consumers customise per-value `disabled` state or any future `KbqVirtualOption` fields without adding new `@Input`s. Defaults to `new KbqVirtualOption(value, this.disabled)`, which is correct for primitive values where `value` itself is the display label.
@Output('beforeOpened') beforeOpened: OutputEmitterRef	Event emitted before the select panel starts opening.
@Output('closed') closedStream: Observable	Event emitted when the select has been closed.
@Output('onSelectAll') onSelectAll: OutputEmitterRef>	Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut. Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.
@Output('openedChange') openedChange: EventEmitter	Event emitted when the select panel has been toggled. Emits true when opened, false when closed. Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see `ngOnInit`) matters beyond this output's original consumers.
@Output('opened') openedStream: Observable	Event emitted when the select has been opened.
@Output('scrolledToBottom') scrolledToBottom: OutputEmitterRef	Emits when the options panel is scrolled to (or within `scrolledToBottomOffset` of) the bottom.
@Output('selectionChange') selectionChange: OutputEmitterRef	Event emitted when the selected value has been changed by the user.
calculateHiddenItems: () => void	Calculates the number of hidden items in multiple selection mode. Updates the hiddenItems property and triggers change detection.
canShowCleaner: boolean	Whether the cleaner (clear button) should be shown.
cdkVirtualForOf: Signal>	Reference to the CDK virtual scroll directive for virtual scrolling support.
cleaner: Signal	Reference to the optional cleaner element for clearing selection.
controlType: string	A name for this control that can be used by `kbq-form-field`.
customMatcher: Signal	User-supplied matcher component for custom value matching logic.
customTagTemplateRef: Signal>	Custom template reference for rendering tag content.
customTrigger: Signal	User-supplied override of the trigger element for custom rendering.
defaultErrorStateMatcher: ErrorStateMatcher
defaultOptions: Partial<{ panelWidth: KbqPanelWidth; panelMinWidth: number; panelMaxWidth: number; panelMaxHeight: number; searchMinOptionsThreshold: number \| "auto"; }>
elementRef: ElementRef
empty: boolean	Whether no option is currently selected.
errorState: boolean	Whether the component is in an error state.
firstFiltered: boolean	Whether the first selected option is filtered (not visible in the list).
firstSelected: KbqOptionBase	Returns the first selected option that is not disabled.
focused: boolean	Whether the select is focused.
footer: Signal>	Reference to the optional footer element in the panel.
hiddenItems: number
isAttached: boolean	Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract.
isBrowser: boolean
isEmptySearchResult: boolean	Whether the search returned no results.
keyManager: ActiveDescendantKeyManager	Manages keyboard events for options in the panel.
localeService: KbqLocaleService
multiSelection: boolean	Whether multiple choice is enabled. True if multiple or multiline mode is active.
ngControl: NgControl
noOptions: boolean	Whether there are no options available.
onChange: (value: any) => void	`View -> model callback called when value changes`
onTouched: () => void	`View -> model callback called when select has been touched`
optionGroups: Signal	All of the defined groups of options.
optionSelectionChanges: Observable>	Combined stream of all of the child options' change events.
options: QueryList	All of the defined select options.
optionsContainer: Signal>	Reference to the container element that holds the options.
overlayDir: CdkConnectedOverlay	Reference to the CDK connected overlay directive.
overlayMinWidth: string \| number	Minimum width of the overlay panel.
overlayOrigin: ElementRef \| CdkOverlayOrigin	Origin element for the overlay panel positioning.
overlayPanelClass: "kbq-select-overlay"	Overlay panel class.
overlayWidth: string \| number	Width of the overlay panel.
panel: Signal>	Reference to the overlay panel element.
panelDoneAnimatingStream: Subject	Emits when the panel element is finished transforming in.
panelOpen: boolean	Whether the select panel is currently open.
parentForm: NgForm
parentFormGroup: FormGroupDirective
positions: ConnectedPosition[]	This position config ensures that the top "start" corner of the overlay is aligned with the top "start" of the origin by default (overlapping the trigger completely). If the panel cannot fit below the trigger, it will fall back to a position above the trigger.
previousSelectionModelSelected: KbqOptionBase[]	Previously selected options before the current selection was made.
scrollStrategy: ScrollStrategy	Strategy that will be used to handle scrolling while the select panel is open.
search: Signal	Reference to the optional search component.
searchEmpty: Signal	Reference to the optional empty search result component.
selected: KbqOptionBase \| KbqOptionBase[]	Returns the currently selected option(s). Single value or array for multiple selection.
selectionModel: SelectionModel	Deals with the selection logic. Manages selected options and their states.
tags: QueryList	Query list of tags displayed in multiple selection mode.
transformOrigin: string	The value of the select panel's transform-origin property for animations.
trigger: Signal>	Trigger - is a clickable field to open select dropdown panel
triggerFontSize: number	The cached font-size of the trigger element in pixels.
triggerRect: DOMRect	The last measured value for the trigger's client bounding rect.
triggerValue: string	Returns the display value for the trigger element.
triggerValues: KbqOptionBase[]	Returns all selected options in display order.
viewportMargin: number	Minimum space to keep between the overlay and the viewport edge. At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above` gap padding is applied to the pane — stays conservative enough to absorb that padding instead of letting the panel overflow the viewport by the size of the gap.
virtualScrollViewport: Signal	Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode.
withVirtualScroll: boolean	Whether virtual scrolling is enabled for the options panel.
Deprecated offsetY: number	The y-offset of the overlay panel in relation to the trigger.

Name

Description

@Input()

backdropClass: InputSignal

Classes to be passed to the overlay backdrop.

@Input()

compareWith: (o1: any, o2: any) => boolean

Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. Should return true if the values match. Defaults to strict equality comparison.

@Input()

disabled: boolean

Whether the select is disabled. When disabled, the select cannot be opened and its value cannot be changed.

@Input()

errorStateMatcher: ErrorStateMatcher

Object used to control when error messages are shown.

@Input()

hasBackdrop: boolean

Whether the overlay should have a backdrop. When true, clicking the backdrop will close the select.

@Input()

hiddenItemsText: string

Template string for hidden items text. Supports {{ number }} placeholder.

@Input()

id: string

Unique identifier for the select component. Auto-generates an ID if not provided.

@Input()

multiline: InputSignalWithTransform

Whether to use a multiline matcher or not. Default is false. When true, allows multiple lines of text in the selected value display.

@Input()

multiple: boolean

Whether multiple options can be selected. Note: This cannot be changed dynamically after initialization.

@Input()

panelClass: InputSignal | { [key: string]: any; }>

Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding.

@Input()

panelMaxHeight: InputSignalWithTransform

Maximum height of the panel's scrollable option list, in pixels. Applied as the `--kbq-select-panel-size-max-height` custom property on the panel, so it also drives the pinned height of a `cdk-virtual-scroll-viewport` — with virtual scroll the value is an exact height, not a cap. The search field and the footer sit outside the scrollable area and add to the panel's total height. When null, the token default (256px) applies.

@Input()

panelMaxWidth: InputSignalWithTransform

Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes the panel narrower than the trigger, and never clamps an explicit `panelWidth`. When null, the `--kbq-panel-size-width-max` token applies.

@Input()

panelMinWidth: InputSignalWithTransform

Minimum width of the panel in pixels. If minWidth is larger than window width, it will be ignored.

@Input()

panelWidth: InputSignal

Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.

@Input()

placeholder: string

Placeholder text to be shown when no value is selected. Displayed in the trigger when the select is closed and no value is selected.

@Input()

required: boolean

Whether the select is required. Affects validation and display of placeholder.

@Input()

scrolledToBottomOffset: InputSignalWithTransform

Distance in pixels from the bottom of the options panel at which `scrolledToBottom` fires. Default `0` — emits only when the panel is fully scrolled to the bottom.

@Input()

searchMinOptionsThreshold: number

Controls when the search functionality is displayed based on the number of available options. Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.

@Input()

selectAllHandler: (event: KeyboardEvent, select: KbqSelect) => void

Function for handling the Ctrl + A (select all) keyboard combination. By default, the internal handler selects all options.

@Input()

selectAllToggle: InputSignalWithTransform

When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects).

@Input()

showPreselectedValues: InputSignal

Determines whether preselected values are displayed.

@Input()

sortComparator: InputSignal<(a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number>

Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.

@Input()

triggerValuesLimit: InputSignal

Specifies the maximum number of trigger values allowed. This constant limits the size of the trigger values array to ensure performance and prevent excessive memory usage. A value of `0` indicates that there is no limit.

@Input()

value: any

Value of the select control. Can be a single value or array of values for multiple selection.

@Input()

virtualOptionFactory: InputSignal<(value: any) => KbqVirtualOption>

Factory used to construct a `KbqVirtualOption` for selected values whose `KbqOption` is not currently rendered (e.g. virtual scroll out of viewport, programmatically set initial value, `showPreselectedValues`). Required when option values are objects so the trigger (and tags in multiple mode) can render a human-readable label. Also lets consumers customise per-value `disabled` state or any future `KbqVirtualOption` fields without adding new `@Input`s. Defaults to `new KbqVirtualOption(value, this.disabled)`, which is correct for primitive values where `value` itself is the display label.

@Output('beforeOpened')

beforeOpened: OutputEmitterRef

Event emitted before the select panel starts opening.

@Output('closed')

closedStream: Observable

Event emitted when the select has been closed.

@Output('onSelectAll')

onSelectAll: OutputEmitterRef>

Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut. Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.

@Output('openedChange')

openedChange: EventEmitter

Event emitted when the select panel has been toggled. Emits true when opened, false when closed. Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see `ngOnInit`) matters beyond this output's original consumers.

@Output('opened')

openedStream: Observable

Event emitted when the select has been opened.

@Output('scrolledToBottom')

scrolledToBottom: OutputEmitterRef

Emits when the options panel is scrolled to (or within `scrolledToBottomOffset` of) the bottom.

@Output('selectionChange')

selectionChange: OutputEmitterRef

Event emitted when the selected value has been changed by the user.

calculateHiddenItems: () => void

Calculates the number of hidden items in multiple selection mode. Updates the hiddenItems property and triggers change detection.

canShowCleaner: boolean

Whether the cleaner (clear button) should be shown.

cdkVirtualForOf: Signal>

Reference to the CDK virtual scroll directive for virtual scrolling support.

cleaner: Signal

Reference to the optional cleaner element for clearing selection.

controlType: string

A name for this control that can be used by `kbq-form-field`.

customMatcher: Signal

User-supplied matcher component for custom value matching logic.

customTagTemplateRef: Signal>

Custom template reference for rendering tag content.

customTrigger: Signal

User-supplied override of the trigger element for custom rendering.

defaultErrorStateMatcher: ErrorStateMatcher

defaultOptions: Partial<{ panelWidth: KbqPanelWidth; panelMinWidth: number; panelMaxWidth: number; panelMaxHeight: number; searchMinOptionsThreshold: number | "auto"; }>

elementRef: ElementRef

empty: boolean

Whether no option is currently selected.

errorState: boolean

Whether the component is in an error state.

firstFiltered: boolean

Whether the first selected option is filtered (not visible in the list).

firstSelected: KbqOptionBase

Returns the first selected option that is not disabled.

focused: boolean

Whether the select is focused.

footer: Signal>

Reference to the optional footer element in the panel.

hiddenItems: number

isAttached: boolean

Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract.

isBrowser: boolean

isEmptySearchResult: boolean

Whether the search returned no results.

keyManager: ActiveDescendantKeyManager

Manages keyboard events for options in the panel.

localeService: KbqLocaleService

multiSelection: boolean

Whether multiple choice is enabled. True if multiple or multiline mode is active.

ngControl: NgControl

noOptions: boolean

Whether there are no options available.

onChange: (value: any) => void

`View -> model callback called when value changes`

onTouched: () => void

`View -> model callback called when select has been touched`

optionGroups: Signal

All of the defined groups of options.

optionSelectionChanges: Observable>

Combined stream of all of the child options' change events.

options: QueryList

All of the defined select options.

optionsContainer: Signal>

Reference to the container element that holds the options.

overlayDir: CdkConnectedOverlay

Reference to the CDK connected overlay directive.

overlayMinWidth: string | number

Minimum width of the overlay panel.

overlayOrigin: ElementRef | CdkOverlayOrigin

Origin element for the overlay panel positioning.

overlayPanelClass: "kbq-select-overlay"

Overlay panel class.

overlayWidth: string | number

Width of the overlay panel.

panel: Signal>

Reference to the overlay panel element.

panelDoneAnimatingStream: Subject

Emits when the panel element is finished transforming in.

panelOpen: boolean

Whether the select panel is currently open.

parentForm: NgForm

parentFormGroup: FormGroupDirective

positions: ConnectedPosition[]

This position config ensures that the top "start" corner of the overlay is aligned with the top "start" of the origin by default (overlapping the trigger completely). If the panel cannot fit below the trigger, it will fall back to a position above the trigger.

previousSelectionModelSelected: KbqOptionBase[]

Previously selected options before the current selection was made.

scrollStrategy: ScrollStrategy

Strategy that will be used to handle scrolling while the select panel is open.

search: Signal

Reference to the optional search component.

searchEmpty: Signal

Reference to the optional empty search result component.

selected: KbqOptionBase | KbqOptionBase[]

Returns the currently selected option(s). Single value or array for multiple selection.

selectionModel: SelectionModel

Deals with the selection logic. Manages selected options and their states.

tags: QueryList

Query list of tags displayed in multiple selection mode.

transformOrigin: string

The value of the select panel's transform-origin property for animations.

trigger: Signal>

Trigger - is a clickable field to open select dropdown panel

triggerFontSize: number

The cached font-size of the trigger element in pixels.

triggerRect: DOMRect

The last measured value for the trigger's client bounding rect.

triggerValue: string

Returns the display value for the trigger element.

triggerValues: KbqOptionBase[]

Returns all selected options in display order.

viewportMargin: number

Minimum space to keep between the overlay and the viewport edge. At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above` gap padding is applied to the pane — stays conservative enough to absorb that padding instead of letting the panel overflow the viewport by the size of the gap.

virtualScrollViewport: Signal

Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode.

withVirtualScroll: boolean

Whether virtual scrolling is enabled for the options panel.

Deprecated

offsetY: number

The y-offset of the overlay panel in relation to the trigger.

Methods

calculateOverlayOffsetX

clearValue

Clears the current selection.

close

Closes the overlay panel and focuses the host element.

focus

Focuses the select element.

getItemHeight

Gets the height of a single option item.

getOverlayRect

getPanelClasses

Returns the full set of classes for the panel: base class, theme and custom `panelClass`.

getPanelTheme

Returns the theme to be used on the panel based on parent form field color.

handleClick

Handles click events on the select. Closes the panel if click is inside the footer.

handleKeydown

Handles all keyboard events for the select. Delegates to appropriate handler based on panel state.

hiddenItemsTextFormatter

Formats the hidden items text with the number of hidden items.

isRtl

Checks if the current direction is RTL (right-to-left).

lockOverlayWidthForSearch

Freezes the panel at its rendered width so that filtering the options does not reflow it. Does nothing when the width is already pinned.

onAttached

Callback that is invoked when the overlay panel has been attached. Sets up position change subscription and closing actions.

onBlur

Calls the touched callback only if the panel is closed. Otherwise, the trigger will "blur" to the panel when it opens, causing a false positive.

onFocus

Handles focus event on the select element.

onRemoveMatcherItem

Handles removal of a matched item in the trigger.

open

Triggers the opening of the panel component. If the component is disabled or the panel is already open, the call is ignored. Otherwise, the (beforeOpened) event is emitted. When no options are available, the panel is opened after a short delay; if options exist, it opens immediately.

openPanel

Internal method to open the panel. Handles overlay positioning and sizing. Sets up the overlay dimensions based on trigger size and configured options.

resetOverlay

resetSearch

Resets the search component if present.

resolveSearchMinOptionsThreshold

setOverlayPosition

toggle

Toggles the overlay panel open or closed.

updateErrorState

Updates the error state based on the error state matcher.

updateOverlayWidth

Resolves the overlay panel size for the current trigger geometry and stores it for the `cdkConnectedOverlay` width bindings.

KbqSelectChange

Change event object that is emitted when the select value has changed.

Properties

Name	Description
source: KbqSelect
value: any

Name

Description

source: KbqSelect

value: any

KbqSelectPanelWidth

Deprecated

Select panel width type.

type KbqSelectPanelWidth = KbqPanelWidth;

KbqSelectOptions

Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token.

type KbqSelectOptions = Partial<{
    /**
     * Width of the panel. If set to `auto`, the panel will match the trigger width.
     * If set to null or an empty string, the panel will grow to match the longest option's text.
     */
    panelWidth: KbqPanelWidth;
    /**
     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
     */
    panelMinWidth: KbqPanelMinWidth;
    /**
     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
     */
    panelMaxWidth: KbqPanelMaxWidth;
    /**
     * Maximum height of the panel's scrollable option list. Does not include the search field or the
     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
     */
    panelMaxHeight: KbqPanelMaxHeight;
    /**
     * Whether to enable hiding search by default if options is less than minimum.
     *
     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
     * - number - will enables search hiding and uses value as min.
     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
     */
    searchMinOptionsThreshold: 'auto' | number;
}>;

KBQ_SELECT_OPTIONS

Injection token that can be used to provide the default options for the `kbq-select`.

const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{ panelWidth: KbqPanelWidth; panelMinWidth: number; panelMaxWidth: number; panelMaxHeight: number; searchMinOptionsThreshold: number | "auto"; }>>;

kbqSelectOptionsProvider

Utility provider for `KBQ_SELECT_OPTIONS`.

const kbqSelectOptionsProvider: (options: Partial<{ panelWidth: KbqPanelWidth; panelMinWidth: number; panelMaxWidth: number; panelMaxHeight: number; searchMinOptionsThreshold: number | "auto"; }>) => Provider;

delayBeforeDisplayingResultWithoutOptions

Delay in milliseconds before displaying a result when there are no options.

const delayBeforeDisplayingResultWithoutOptions: number;

minimumTimeToDisplayLoading

Minimum time in milliseconds to display the loading state.

const minimumTimeToDisplayLoading: number;