MultiSelect MultiSelect is used to select multiple items from a collection.

Selected Cars: {{selectedCars}}

Import


import {MultiSelectModule} from 'primeng/primeng';

Getting Started

Two-way value binding is defined using ngModel and multiselect requires a collection of options where each option should follow the SelectItem interface that defines label-value properties.


<p-multiSelect [options]="cities" [(ngModel)]="selectedCities"></p-multiSelect>


import {SelectItem} from 'primeng/primeng';

export class MyModel {

    cities: SelectItem[];

    selectedCity: string[];

    constructor() {
        this.cities = [];
        this.cities.push({label:'New York', value:'New York'});
        this.cities.push({label:'Rome', value:'Rome'});
        this.cities.push({label:'London', value:'London'});
        this.cities.push({label:'Istanbul', value:'Istanbul'});
        this.cities.push({label:'Paris', value:'Paris'});
    }

}

Model Driven Forms

MultiSelect can be used in a model driven form as well.


<p-multiSelect [options]="cities" formControlName="selectedCities"></p-multiSelect>

Attributes

Name Type Default Description
options array null An array of selectitems to display as the available options.
disabled boolean false When present, it specifies that the element should be disabled.
defaultLabel string Choose Label to display when there are no selections.
style string null Inline style of the element.
styleClass string null Style class of the element.
scrollHeight string 200px Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
overlayVisible boolean false Specifies the visibility of the options panel.

Events

Name Parameters Description
onChange event.originalEvent: browser event
event.value: Current selected values
Callback to invoke when value changes.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-multiselect Container element.
ui-multiselect-label-container Container of the label to display selected items.
ui-multiselect-label-container Label to display selected items.
ui-multiselect-trigger Dropdown button.
ui-multiselect-filter-container Container of filter input.
ui-multiselect-panel Overlay panel for items.
ui-multiselect-items List container of items.
ui-multiselect-item An item in the list.

Dependencies

None.


<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>

<p>Selected Cars: {{selectedCars}}</p>


export class MultiSelectDemo {

    cars: SelectItem[];

    selectedCars: string[] = [];

    constructor() {
        this.cars = [];
        this.cars.push({label: 'Audi', value: 'Audi'});
        this.cars.push({label: 'BMW', value: 'BMW'});
        this.cars.push({label: 'Fiat', value: 'Fiat'});
        this.cars.push({label: 'Ford', value: 'Ford'});
        this.cars.push({label: 'Honda', value: 'Honda'});
        this.cars.push({label: 'Jaguar', value: 'Jaguar'});
        this.cars.push({label: 'Mercedes', value: 'Mercedes'});
        this.cars.push({label: 'Renault', value: 'Renault'});
        this.cars.push({label: 'VW', value: 'VW'});
        this.cars.push({label: 'Volvo', value: 'Volvo'});
    }
}