Multi-Select

Dropdown with multi-selection, filtering, select-all, and drag-to-reorder.

Signal Forms

Using [(values)] with a signal.

Selected: [ "Apple", "Banana" ]

Code
<mat-form-field appearance="outline">
  <mat-label>Select fruits</mat-label>
  <rui-multi-select
    [options]="fruits"
    [(values)]="selectedFruits"
  />
</mat-form-field>

Reactive Forms (sortable)

Using [formControl] with sortable enabled for drag reorder.

Selected: [ "Apple", "Cherry" ]

Code
<mat-form-field appearance="outline">
  <mat-label>Select fruits</mat-label>
  <rui-multi-select
    [options]="fruits"
    [formControl]="fruitsControl"
    [sortable]="true"
  />
</mat-form-field>

Template-driven Forms

Using [(ngModel)] with the multi-select.

Selected: []

Code
<mat-form-field appearance="outline">
  <mat-label>Select fruits</mat-label>
  <rui-multi-select
    [options]="fruits"
    [(ngModel)]="selectedFruits"
  />
</mat-form-field>