Listbox Listbox is used to select one or more values from a list of items.

Single

Selected City: {{selectedCity}}

Multiple

Selected Cities: {{c}}  

Content

Selected Car: {{selectedCar}}

Import

import {Listbox} from 'primeng/primeng';

Getting Started

Listbox requires a collection of options and a value to bind. Options should follow the SelectItem interface that defines label and value properties.

<p-listbox [options]="cities" [(value)]="selectedCity"></p-listbox>
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'});
    }

}

Multiple

Listbox allows selecting only one item, setting multiple option enables choosing more than one item. In multiple case, model property should be an array.

<p-listbox [options]="cities" [(value)]="selectedCities"></p-listbox>
import {SelectItem} from 'primeng/primeng';

export class MyModel {

    cities: SelectItem[];

    selectedCities: 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'});
    }

}

Custom Content

Label of an option is used as the display text of an item, for custom content support enable customContent property as true and provide an unordered list.

<p-listbox [options]="cars" [(value)]="selectedCar" customContent="true" style="width:190px">
    <ul>
        <li *ngFor="#car of cars" class="ui-helper-clearfix">
            <img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
            <div style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</div>
        </li>
    </ul>
</p-listbox>
import {SelectItem} from 'primeng/primeng'

export class MyModel {

    cars: SelectItem[];

    selectedCar: 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: 'Volkswagen', value: 'Volkswagen'});
        this.cars.push({label: 'Volvo', value: 'Volvo'});
    }
}

Attributes

Name Type Default Description
options array null An array of selectitems to display as the available options.
value any false Value of the listbox.
multiple boolean false When specified, allows selecting multiple values.
scrollHeight number 200 Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
customContent boolean false Used to display customized content inside the listbox.
style string null Inline style of the element.
styleClass string null Style class of the element.

Events

Name Parameters Description
onChange event.originalEvent: browser event
event.value: single value or an array of values that are selected
Callback to invoke when value of listbox changes.

Styling

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

Name Element
ui-listbox Container element.
ui-listbox-list List container.
ui-listbox-item An item in the list.

Dependencies

jQuery, jQuery UI WidgetFactory API, PrimeUI Listbox.

<h3 class="first">Single</h3>
<p-listbox [options]="cities" [(value)]="selectedCity"></p-listbox>

<p>Selected City: {{selectedCity}}</p>

<h3>Multiple</h3>
<p-listbox [options]="cities" [(value)]="selectedCities" multiple="multiple"></p-listbox>
<p>Selected Cities: <span *ngFor="#c of selectedCities">{{c}}  </span></p>

<h3>Content</h3>
<p-listbox [options]="cars" [(value)]="selectedCar" customContent="true" style="width:190px">
    <ul>
        <li *ngFor="#car of cars" class="ui-helper-clearfix">
            <img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
            <div style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</div>
        </li>
    </ul>
</p-listbox>
<p>Selected Car: {{selectedCar}}</p>

<button type="button" (click)="selectedCar=null" pButton icon="fa-close">Clear Selected Car</button>
export class ListboxDemo {

    cities: SelectItem[];

    selectedCity: string;

    selectedCities: string[];

    cars: SelectItem[];

    selectedCar: string = 'BMW';

    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'});

        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: 'Volkswagen', value: 'Volkswagen'});
        this.cars.push({label: 'Volvo', value: 'Volvo'});
    }
}