SelectButton SelectButton is used to choose single or multiple items from a list using buttons.

Single

Selected Type: {{selectedType}}

Multiple

Selected Types: {{selectedTypes}}


Import

import {SelectButton} from 'primeng/primeng';

Getting Started

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

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

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

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

}

Attributes

Name Type Default Description
options array null An array of selectitems to display as the available options.
value any false Value of the component.
multiple boolean false When specified, allows selecting multiple values.
tabindex number null Index of the element in tabbing order.

Events

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

Dependencies

jQuery, jQuery UI WidgetFactory API, PrimeUI SelectButton.

<h3 class="first">Single</h3>
<p-selectButton [options]="types" [(value)]="selectedType"></p-selectButton>

<p>Selected Type: {{selectedType}}</p>

<h3>Multiple</h3>
<p-selectButton [options]="types" [(value)]="selectedTypes" multiple="multiple"></p-selectButton>
<p>Selected Types: {{selectedTypes}}</p>

<hr />

<button type="button" (click)="clear()" pButton icon="fa-close">Clear</button>
export class SelectbuttonDemoComponent {

    types: SelectItem[];

    selectedType: string;

    selectedTypes: string[] = ['Apartment','Studio'];

    constructor() {
        this.types = [];
        this.types.push({label: 'Apartment', value: 'Apartment'});
        this.types.push({label: 'House', value: 'House'});
        this.types.push({label: 'Studio', value: 'Studio'});
    }

    clear() {
        this.selectedType = null;
        this.selectedTypes = [];
    }
}