@kit-ng-ui/select

A searchable select control with single, multiple, and tags modes. Mirrors ant-design Select's most common surface.

Install

pnpm add @kit-ng-ui/select @kit-ng-ui/core @kit-ng-ui/icons

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/select/styles' as select;

Use

import { Component, signal } from '@angular/core';
import { KitSelectComponent } from '@kit-ng-ui/select';

@Component({
  standalone: true,
  imports: [KitSelectComponent],
  template: `
    <kit-select [options]="fruits" [(value)]="picked" placeholder="Pick a fruit" />

    <kit-select
      mode="multiple"
      [options]="fruits"
      [(value)]="picks"
      placeholder="Pick several"
      [allowClear]="true"
    />

    <kit-select [showSearch]="true" [options]="fruits" [(value)]="picked" placeholder="Search" />
  `,
})
export class SelectDemo {
  fruits = [
    { label: 'Apple', value: 'a' },
    { label: 'Banana', value: 'b' },
    { label: 'Cherry', value: 'c' },
  ];
  picked = signal<unknown>(null);
  picks = signal<ReadonlyArray<unknown>>([]);
}

API

| Input | Type | Default | | ----------------- | -------------------------------------------- | ----------- | | options | KitSelectOption[] | [] | | value | unknown \| unknown[] | null/[] | | mode | 'default' \| 'multiple' \| 'tags' | 'default' | | size | 'sm' \| 'md' \| 'lg' | 'md' | | status | 'default' \| 'error' \| 'warning' | 'default' | | disabled | boolean | false | | allowClear | boolean | false | | showSearch | boolean | false | | loading | boolean | false | | placeholder | string \| null | null | | maxTagCount | number \| null — collapse overflow into +N | null | | notFoundContent | string | 'No data' | | block | boolean — fill parent width | false |

Outputs: (valueChange), (searchChange), (openChange), (clear).

Implements ControlValueAccessor.

Keyboard

| Key | Action | | ----------- | --------------------------------------- | | ArrowDown | Open dropdown / move highlight down | | ArrowUp | Move highlight up | | Enter | Open dropdown / pick highlighted option | | Escape | Close dropdown | | Backspace | (multi/tags) remove last selected value |

Accessibility

• The trigger is a role="combobox" with aria-haspopup="listbox" / aria-expanded; the dropdown is a role="listbox" and each row a role="option" with aria-selected.
• Every rendered option gets a stable, unique id (derived from the control's own id), and the focused search input exposes aria-activedescendant pointing at the highlighted option while open — so screen readers announce each row as you arrow through the list (WCAG 4.1.2). It clears when the dropdown closes. The input also sets aria-controls to the listbox id while open.
• Keyboard focus on the (closed) trigger draws the standard kit focus ring.
• Labelling inputs: ariaLabel, ariaDescribedby, ariaInvalid, ariaRequired.

Behavior notes

• mode="tags" lets the user enter free-text values that don't exist in [options]; pressing Enter with a non-empty search input creates a new tag.
• The dropdown closes on outside click and on focusout when focus leaves the host.
• This is a first-pass implementation. Not yet supported (TODO parity): virtual scrolling, async data with built-in loading source, option groups, custom option / tag templates, server-driven [loading] from a stream, dropdownRender. The component's (searchChange) output is the integration point for async sources today.