Forms

Stable - @kikita-labs/ui v1.6.1

Select

Readonly native input trigger backed by explicit dropdown and option primitives.

Import

Select composes field, dropdown, option, and the native input select directive.

select.ts
import {
  KuiDropdownComponent,
  KuiFieldComponent,
  KuiOptionDirective,
  KuiSelectDirective,
  kuiProvideSelectOptions,
} from '@kikita-labs/ui';

Usage

Open in Playground

Bind value with Angular signals and keep option markup explicit.

Pick one role for the user

<kui-field label="Role" hint="Pick one role for the user">
  <input kuiSelect [(value)]="role" placeholder="Select a role..." [clearable]="true" />
  <kui-dropdown>
    <div kuiOption value="engineer">Software Engineer</div>
    <div kuiOption value="designer">Designer</div>
    <div kuiOption value="manager">Product Manager</div>
  </kui-dropdown>
</kui-field>

Multiple values

Set multiple when the value is an array. Selected values render as field chips by default.

Software Engineer

Multiple mode renders selected values as chips

<kui-field label="Roles" hint="Multiple mode renders selected values as chips">
  <input
    kuiSelect
    multiple
    [(value)]="roles"
    [kuiLabelFn]="roleLabel"
    [maxVisibleChips]="3"
    placeholder="Select roles..."
    [clearable]="true"
  />
  <kui-dropdown>
    @for (role of roleOptions; track role.value) {
      <div kuiOption [value]="role.value">{{ role.label }}</div>
    }
  </kui-dropdown>
</kui-field>

Provider defaults

Use provider defaults for app-wide select behavior. Local inputs still win.

app.config.ts.ts
import { kuiProvideSelectOptions } from '@kikita-labs/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    kuiProvideSelectOptions({
      clearable: true,
      maxVisibleChips: 2,
    }),
  ],
};

API

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

NameTypeDefaultDescription
valueT | readonly T[] | null — Selected value. In multiple mode this is an array.
disabledboolean — Disables the native input and prevents opening the dropdown.
readonlyboolean — Prevents opening the dropdown while keeping the field visually enabled.
invalidboolean — Validation state set by Signal Forms or direct input binding.
errorsValidationError[] — Validation errors consumed by kui-field for automatic error text.
touchedboolean — Touched state set by Signal Forms.
idstring — Explicit id override. Inside kui-field, the field id is used when omitted.
multipleboolean — Enables array values and keeps the dropdown open on option selection.
maxVisibleChipsnumber | undefined — Maximum selected chips shown before collapsed +N overflow.
multipleDisplay'chips' | 'text' — Renders multiple selections as field chips or plain joined text.
multipleTextFn(items: readonly T[]) => string — Formats native input text when multipleDisplay is text.
kuiLabelFn(item: T) => string — Maps selected object values to display text.
placeholderstring — Placeholder on the readonly input.
clearableboolean | undefined — Shows a clear button when a value is selected; falls back to provider options.
touchoutput — Emitted after an opened dropdown closes for Signal Forms support.

Accessibility

Select keeps field wiring on kui-field and listbox semantics on dropdown options.

  • The trigger input uses combobox semantics and reflects dropdown expanded state.
  • Dropdown panel uses listbox semantics; each kuiOption is an option.
  • Use kui-field for label, hint, error, and described-by wiring.
  • Clear affordance is a native button with an accessible label.