Platform: MultiCombobox Component Technical Design

MultiCombobox

Summary

The MultiCombobox is an input component used for multi-selection from a large list of options. It consists of a combobox which includes checkboxes in its dropdown for multiple selection of items. Selection of items adds tokens of the selected options to the element. These tokens can be removed by clicking on the remove icon within each token.

Example

<fdp-multi-combobox
    [(ngModel)]="shoppingBag"
    [placeholder]="'Add items'"
    [dropdownValues]="['Apple', 'Banana', 'Orange']"
    [disabled]="true"></fdp-multi-combobox>

<fdp-multi-combobox
    [(ngModel)]="shoppingBag"
    [placeholder]="'Add items'"
    [dropdownValues]="catalogObservable | async"></fdp-multi-combobox>

Design

The MultiCombobox has the same features and functionality as the MultiInput component in Fundamental NGX: Core. As such, the Platform MultiCombobox component will be a wrapper around the Core MultiInput component and will provide identical bindings as MultiInput. Additionally, since this is an input element, it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent.

Notes