KikitaUiDocs

Assignee

<kui-field label="Assignee">
  <input kuiCombobox [(value)]="assignee" [(query)]="query" [kuiLabelFn]="personLabel" placeholder="Search people..." [clearable]="true" />
  <kui-dropdown>
    @for (person of filteredPeople(); track person.id) {
      <button kuiOption [value]="person">{{ person.name }}</button>
    }
  </kui-dropdown>
</kui-field>

Name	Type	Default	Description
value	`T \| string \| null`	`null`	Selected value. Bound by [formField] or [(value)].
query	`string`	`''`	Current search text shown in the native input.
search	`output: string`	`-`	Emitted on every native input edit. Use for local filtering or remote requests.
kuiLabelFn	`(item: T) => string`	`String()`	Maps a selected object value to display text. Required when T is not a primitive.
placeholder	`string`	`''`	Native input placeholder shown when no value is selected.
mode	`'filter' \| 'free' \| 'async'`	`'filter'`	filter clears the value while editing until a kuiOption is selected. free stores typed text as the value. async documents that filtering happens outside the directive.
clearable	`boolean \| undefined`	`true`	Shows a clear affordance. Falls back to KUI_COMBOBOX_OPTIONS, then KUI_FIELD_OPTIONS, then true.
loading	`boolean`	`false`	Shows a suffix loader. Loading row content inside kui-dropdown is projected by the consumer.
disabled	`boolean`	`false`	Disables the native input. Set by [formField] or directly.
readonly	`boolean`	`false`	Keeps the value readable but prevents editing and opening the dropdown.
invalid	`boolean`	`false`	Applies ARIA invalid state. kui-field also contributes invalid state from validation.
errors	`readonly ValidationError[]`	`[]`	Validation errors set by [formField], consumed by kui-field for automatic error text.
touched	`boolean`	`false`	Touched state set by [formField] or Signal Forms.
touch	`output: void`	`-`	Emitted when an opened dropdown closes; marks the control touched for Signal Forms.
id	`string \| undefined`	`undefined`	Explicit id override. Inside kui-field, the field id is used when omitted.
kuiOption	`directive`	`-`	Marks a projected option inside kui-dropdown. Provides role="option", aria-selected, disabled state, and keyboard navigation.
kuiComboboxHighlight	`pipe: (label: string, query: string \| null \| undefined) => readonly { text: string; match: boolean }[]`	`-`	Splits an option label into plain and matched segments for highlighting the current query.
kuiProvideComboboxOptions	`(opts: KuiComboboxOptions) => Provider`	`-`	Registers app-wide combobox defaults, such as clearable, via KUI_COMBOBOX_OPTIONS.
KUI_COMBOBOX_OPTIONS	`InjectionToken<KuiComboboxOptions>`	`-`	Injection token backing kuiProvideComboboxOptions. Read by the directive for clearable fallback.
--kui-combobox-affordance-size	`CSS custom property`	`-`	Size of the suffix clear/chevron affordance controls.
--kui-combobox-suffix-gap	`CSS custom property`	`-`	Gap between suffix affordances (clear button, chevron, loader).
--kui-combobox-loader-size	`CSS custom property`	`-`	Diameter of the suffix loading spinner.
--kui-combobox-loader-border-width	`CSS custom property`	`-`	Border width of the suffix loading spinner.
--kui-combobox-loader-duration	`CSS custom property`	`-`	Animation duration of the suffix loading spinner.
--kui-combobox-highlight-bg	`CSS custom property`	`-`	Background color of matched text inside kui-combobox-highlight.
--kui-combobox-highlight-text	`CSS custom property`	`-`	Text color of matched text inside kui-combobox-highlight.
--kui-combobox-highlight-radius	`CSS custom property`	`-`	Corner radius of the matched-text highlight mark.

Inputs and outputs verified against @kikita-labs/ui v1.6.1 public typings.

Combobox — Playground