Menu

Select Input

Commonly used select input component.

Examples

Select Field

Select and multi select input fields

2. Template Driven (Simple Strings)

Selected:

3. Signal Binding

Binding directly to a WritableSignal

Signal Value: IN

Multi Select Field

Select and multi select input fields

Form Value:
{
  "team": [
    1,
    3
  ],
  "skills": [
    "Angular"
  ]
}

Code

<wdc-select-input
  [ngModel]="selectValue()"
  (ngModelChange)="selectValue.set($event)"
  label="Single Select"
  [options]="selectOptions"
>
</wdc-select-input>
 <wdc-select-input
  [ngModel]="multiSelectValue()"
  (ngModelChange)="multiSelectValue.set($event)"
  label="Multi Select (Searchable)"
  [multiple]="true"
  [searchable]="true"
  [options]="selectOptions"
>
</wdc-select-input>

API Reference

InputTypeDefaultDescription
options{ label: string; value: any }[]undefinedOptions for the select input field.
disabledbooleanfalseWhether the select input field is disabled.
multiplebooleanfalseWhether the select input field supports multiple selection.
searchablebooleanfalseWhether the select input field supports searching.
labelstringundefinedLabel text for the select input field.
placeholderstringSelect an optionPlaceholder text for the select input field.
errorstring | nullnullError message to display when the select input field is invalid.
onChangeanyundefinedCallback function called when the value of the select input field changes.