Form field — API

KbqLabel

Label for the form field.

Selector: kbq-label

Exported as: kbqLabel

KbqPrefix

Element to be placed in front of the form field.

Selector: [kbqPrefix]

Exported as: kbqPrefix

KbqSuffix

Element to be placed at the end of the form field.

Selector: [kbqSuffix]

KbqLegend

Directive for marking an element as legend of `KbqFieldset`

Selector: [kbqLegend]

KbqError extends KbqHint

Error text to be shown below the form field control.

Selector: kbq-error

Exported as: kbqError

Properties

Name	Description
color: string
colorClassName: string	current class name of color
compact: boolean	Makes the hint size smaller.
fillTextOff: boolean	Disables `color` for the hint text.
id: InputSignal	Unique ID for the hint.

Name

Description

color: string

colorClassName: string

current class name of color

compact: boolean

Makes the hint size smaller.

fillTextOff: boolean

Disables `color` for the hint text.

id: InputSignal

Unique ID for the hint.

Methods

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqHint

Hint text to be shown below the form field control.

Selector: kbq-hint

Exported as: kbqHint

Properties

Name	Description
@Input() compact: boolean	Makes the hint size smaller.
@Input() fillTextOff: boolean	Disables `color` for the hint text.
@Input() id: InputSignal	Unique ID for the hint.
color: string
colorClassName: string	current class name of color

Name

Description

@Input()

compact: boolean

Makes the hint size smaller.

@Input()

fillTextOff: boolean

Disables `color` for the hint text.

@Input()

id: InputSignal

Unique ID for the hint.

color: string

colorClassName: string

current class name of color

Methods

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqFieldsetItem

Directive for marking elements as items inside `KbqFieldset`

Selector: [kbqFieldsetItem]

KbqReactivePasswordHint extends KbqHint

Password hint to be shown below the password form field control.

Selector: kbq-reactive-password-hint

Exported as: kbqReactivePasswordHint

Properties

Name	Description
@Input() hasError: InputSignalWithTransform	Whether the form field control has an error.
color: string
colorClassName: string	current class name of color
compact: boolean	Makes the hint size smaller.
fillTextOff: boolean	Disables `color` for the hint text.
id: InputSignal	Unique ID for the hint.

Name

Description

@Input()

hasError: InputSignalWithTransform

Whether the form field control has an error.

color: string

colorClassName: string

current class name of color

compact: boolean

Makes the hint size smaller.

fillTextOff: boolean

Disables `color` for the hint text.

id: InputSignal

Unique ID for the hint.

Methods

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqFieldset

A group of form-fields and related controls. Container component emulating the native `fieldset` element.

Selector: kbq-fieldset

KbqPasswordHint extends KbqHint

Selector: kbq-password-hint

Properties

Name	Description
@Input('checkRule') customCheckRule: InputSignal<(value: string) => boolean>
@Input() fillTextOff: boolean
@Input() id: InputSignal
@Input() max: InputSignal
@Input() min: InputSignal
@Input() regex: RegExp
@Input() rule: InputSignal
@Input() viewFormField: InputSignal
checked: boolean
color: string
colorClassName: string	current class name of color
compact: boolean	Makes the hint size smaller.
hasError: boolean
icon: string

Name

Description

@Input('checkRule')

customCheckRule: InputSignal<(value: string) => boolean>

@Input()

fillTextOff: boolean

@Input()

id: InputSignal

@Input()

max: InputSignal

@Input()

min: InputSignal

@Input()

regex: RegExp

@Input()

rule: InputSignal

@Input()

viewFormField: InputSignal

checked: boolean

color: string

colorClassName: string

current class name of color

compact: boolean

Makes the hint size smaller.

hasError: boolean

icon: string

Methods

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqCleaner

Element to be placed in end of the form field. Resets form control by click.

Selector: kbq-cleaner

Exported as: kbqCleaner

Properties

Name	Description
@Input('aria-label') ariaLabel: InputSignal	Accessible name of the cleaner. Defaults to the localized "Clear".
autoColor: boolean
changeDetectorRef: ChangeDetectorRef
color: string
colorClassName: string	current class name of color
destroyRef: DestroyRef
disabled: boolean	Whether the button is disabled.
elementRef: ElementRef
focusMonitor: FocusMonitor
hasError: boolean
iconName: string	Name of an icon within a
name: string
registry: KbqIconRegistry
size: InputSignal	Size of the icon button.
tabindex: any
Deprecated small: InputSignal

Name

Description

@Input('aria-label')

ariaLabel: InputSignal

Accessible name of the cleaner. Defaults to the localized "Clear".

autoColor: boolean

changeDetectorRef: ChangeDetectorRef

color: string

colorClassName: string

current class name of color

destroyRef: DestroyRef

disabled: boolean

Whether the button is disabled.

elementRef: ElementRef

focusMonitor: FocusMonitor

hasError: boolean

iconName: string

Name of an icon within a

name: string

registry: KbqIconRegistry

size: InputSignal

Size of the icon button.

tabindex: any

Deprecated

small: InputSignal

Methods

getHostElement

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

updateMaxHeight

KbqPasswordToggle

Component which changes password visibility.

Selector: kbq-password-toggle

Exported as: kbqPasswordToggle

Properties

Name	Description
@Input('kbqTooltipNotHidden') content: string \| TemplateRef	Tooltip shown while the password is visible. Reading it resolves to the tooltip matching the current visibility, so that the base trigger renders the right one.
@Input() kbqTooltipHidden: InputSignal>	Tooltip shown while the password is hidden.
@Input() tabindex: InputSignalWithTransform
arrow: boolean	Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.
changeDetectorRef: ChangeDetectorRef
color: string	Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.
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`.
focusMonitor: FocusMonitor
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.
hasError: boolean
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.
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`).
nativeElement: HTMLElement
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.
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

@Input('kbqTooltipNotHidden')

content: string | TemplateRef

Tooltip shown while the password is visible. Reading it resolves to the tooltip matching the current visibility, so that the base trigger renders the right one.

@Input()

kbqTooltipHidden: InputSignal>

Tooltip shown while the password is hidden.

@Input()

tabindex: InputSignalWithTransform

arrow: boolean

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

changeDetectorRef: ChangeDetectorRef

color: string

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

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

focusMonitor: FocusMonitor

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.

hasError: boolean

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.

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`).

nativeElement: HTMLElement

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.

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

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.

KbqStepper

Component which allow to increment or decrement number value.

Selector: kbq-stepper

Exported as: kbqStepper

Properties

Name	Description
@Output('stepDown') stepDown: OutputEmitterRef	Emitted when the stepper is decremented.
@Output('stepUp') stepUp: OutputEmitterRef	Emitted when the stepper is incremented.

Name

Description

@Output('stepDown')

stepDown: OutputEmitterRef

Emitted when the stepper is decremented.

@Output('stepUp')

stepUp: OutputEmitterRef

Emitted when the stepper is incremented.

KbqFormField

Container for form controls that applies styling and behavior.

Selector: kbq-form-field

Exported as: kbqFormField

Properties

Name	Description
@Input() contentClass: InputSignal>	Additional CSS classes applied to the content wrapper element.
@Input() horizontal: InputSignalWithTransform	Whether the form field is displayed horizontally.
@Input() @Output('inOverlayChange') inOverlay: ModelSignal	Use when KbqFormField is in an overlay container.
@Input() labelClass: InputSignal>	Additional CSS classes applied to the label element.
@Input() noBorders: InputSignalWithTransform	Disables form field borders and shadows.
autofilled: boolean	Whether the form field control's value was filled in by the browser. Controls that cannot be autofilled do not implement `autofilled`, and report `false` here. Reflected as `kbq-form-field_autofilled` for application code to key on. The autofill styling does not use it: CSS matches `:autofill` directly, in the same style pass the browser fills the field, where this arrives a frame or two later. Keeping the paint on one source also means a class left behind by a detached or re-attached control cannot tint a field the browser no longer considers autofilled.
color: string
colorClassName: string	current class name of color
disabled: boolean	Whether the form field is disabled.
invalid: boolean	Whether the form field is invalid.

Name

Description

@Input()

contentClass: InputSignal>

Additional CSS classes applied to the content wrapper element.

@Input()

horizontal: InputSignalWithTransform

Whether the form field is displayed horizontally.

@Input()

@Output('inOverlayChange')

inOverlay: ModelSignal

Use when KbqFormField is in an overlay container.

@Input()

labelClass: InputSignal>

Additional CSS classes applied to the label element.

@Input()

noBorders: InputSignalWithTransform

Disables form field borders and shadows.

autofilled: boolean

Whether the form field control's value was filled in by the browser. Controls that cannot be autofilled do not implement `autofilled`, and report `false` here. Reflected as `kbq-form-field_autofilled` for application code to key on. The autofill styling does not use it: CSS matches `:autofill` directly, in the same style pass the browser fills the field, where this arrives a frame or two later. Keeping the paint on one source also means a class left behind by a detached or re-attached control cannot tint a field the browser no longer considers autofilled.

color: string

colorClassName: string

current class name of color

disabled: boolean

Whether the form field is disabled.

invalid: boolean

Whether the form field is invalid.

Methods

focus

Focuses the control.

getConnectedOverlayOrigin

Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to.

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqFormFieldControl

An interface which allows a control to work inside of a `KbqFormField`.

Properties

Name	Description
autofilled: Signal	Whether the control's value was filled in by the browser. Implement it only where autofill is reachable: on a control that is itself a text input or a textarea, or — like `KbqTagList` — on a wrapper that forwards the state of the input it hosts. Leave it out on controls the browser never fills. A signal rather than a plain property because the form field reads it from a host binding and runs `OnPush`: a signal read there marks the form field dirty on its own.
controlType: string	An optional name for the control type that can be used to distinguish `kbq-form-field` elements based on their control type. The form field will add a class, `kbq-form-field-type-{{controlType}}` to its root element.
disabled: boolean	Whether the control is disabled.
empty: boolean	Whether the control is empty.
errorState: boolean	Whether the control is in an error state.
focused: boolean	Whether the control is focused.
id: string	The element ID for this control.
ngControl: NgControl	Gets the NgControl for this control.
placeholder: string	The placeholder for this control.
required: boolean	Whether the control is required.
stateChanges: Observable	Stream that emits whenever the state of the control changes such that the parent `KbqFormField` needs to run change detection.
value: T	The value of the control.

Name

Description

autofilled: Signal

Whether the control's value was filled in by the browser. Implement it only where autofill is reachable: on a control that is itself a text input or a textarea, or — like `KbqTagList` — on a wrapper that forwards the state of the input it hosts. Leave it out on controls the browser never fills. A signal rather than a plain property because the form field reads it from a host binding and runs `OnPush`: a signal read there marks the form field dirty on its own.

controlType: string

An optional name for the control type that can be used to distinguish `kbq-form-field` elements based on their control type. The form field will add a class, `kbq-form-field-type-{{controlType}}` to its root element.

disabled: boolean

Whether the control is disabled.

empty: boolean

Whether the control is empty.

errorState: boolean

Whether the control is in an error state.

focused: boolean

Whether the control is focused.

id: string

The element ID for this control.

ngControl: NgControl

Gets the NgControl for this control.

placeholder: string

The placeholder for this control.

required: boolean

Whether the control is required.

stateChanges: Observable

Stream that emits whenever the state of the control changes such that the parent `KbqFormField` needs to run change detection.

value: T

The value of the control.

Methods

focus

Focuses the control.

onContainerClick

Handles a click on the control's container.

open

Opens control's overlay.

KbqFormFieldDefaultOptions

Default options for the kbq-form-field that can be configured using the `KBQ_FORM_FIELD_DEFAULT_OPTIONS` injection token.

type KbqFormFieldDefaultOptions = Partial<{
    /** Disables form field borders and shadows. */
    noBorders: boolean;
    /** Use when KbqFormField is in an overlay container. */
    inOverlay: boolean;
    /** Whether the form field is displayed horizontally. */
    horizontal: boolean;
    /** Additional CSS classes applied to the label element. */
    labelClass: string | string[] | Set<string>;
    /** Additional CSS classes applied to the content wrapper element. */
    contentClass: string | string[] | Set<string>;
}>;

regExpPasswordValidator

const regExpPasswordValidator: { 2: RegExp; 1: RegExp; 3: RegExp; 4: RegExp; };

hasPasswordStrengthError

const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint> | readonly KbqPasswordHint[]) => boolean;

kbqFormFieldDefaultOptionsProvider

Utility provider for `KBQ_FORM_FIELD_DEFAULT_OPTIONS`.

const kbqFormFieldDefaultOptionsProvider: (options: Partial<{ noBorders: boolean; inOverlay: boolean; horizontal: boolean; labelClass: string | string[] | Set<string>; contentClass: string | string[] | Set<string>; }>) => Provider;