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

Single

Selected Type: {{selectedType}}

Multiple

Selected Types: {{type}}


Import


import {SelectButton} from 'primeng/primeng';

Getting Started

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


<p-selectButton [options]="cities" [(ngModel)]="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 instance that is not null or undefined.


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

}

Model Driven Forms

SelectButton can be used in a model driven form as well by defining ngFormControl or ngControl.


<p-selectButton [options]="cities" ngControl="selectedCity"></p-selectButton>

Attributes

Name Type Default Description
options array null An array of selectitems to display as the available options.
multiple boolean false When specified, allows selecting multiple values.
tabindex number null Index of the element in tabbing order.
style string null Inline style of the component.
styleClass string null Style class of the component.

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 changes.

Dependencies

Native component that requires css of PrimeUI SelectButton.


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

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

<h3>Multiple</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
<p>Selected Types: <span *ngFor="let type of selectedTypes">{{type}} </span></p>

<hr />

<button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"></button>


export class SelectButtonDemo {

    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 = [];
    }
}