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

Single

Selected Type: {{selectedType}}

Multiple

Selected Types: {{type}}

Icon Only

Selected Modes: {{mode}}

Import


import {SelectButtonModule} from 'primeng/selectbutton';

Getting Started

SelectButton requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.


<p-selectButton [options]="cities1" [(ngModel)]="selectedCity1"></p-selectButton>

<p-selectButton [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-selectButton>


import {SelectItem} from 'primeng/api';

export class MyModel {

    cities1: SelectItem[];

    cities2: City[];

    selectedCity1: City;

    selectedCity2: City;

    constructor() {
      //SelectItem API with label-value pairs
      this.cities1 = [
          {label:'Select City', value:null},
          {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
          {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
          {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
          {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}}
          {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
      ];
      
      //An array of cities
      this.cities2 = [
          {name: 'New York', code: 'NY'},
          {name: 'Rome', code: 'RM'},
          {name: 'London', code: 'LDN'},
          {name: 'Istanbul', code: 'IST'},
          {name: 'Paris', code: 'PRS'}
      ];
    }

}

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/api';

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.


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

Icons

Button options can display icons using the icon property of the SelectItem API.


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


export class SelectButtonDemo {

    types: SelectItem[];

    selectedType: string;

    constructor() {
        this.types = [];
        this.types.push({title: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'});
        this.types.push({title: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'});
        this.types.push({title: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'});
    }
}

Properties

Name	Type	Default	Description
options	array	null	An array of selectitems to display as the available options.
optionLabel	string	null	Name of the label field of an option when an arbitrary objects instead of SelectItems are used as 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.
disabled	boolean	false	When present, it specifies that the element should be disabled.

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.
onOptionClick	event.originalEvent: browser event event.option: SelectItem instance of the clicked button event.index: Index of the clicked button	Callback to invoke when a button is clicked.

Dependencies

None.

View on GitHub


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

<h3>Icon Only</h3>
<p-selectButton [options]="modes" [(ngModel)]="selectedMode" multiple="multiple"></p-selectButton>
<p>Selected Modes: <span *ngFor="let mode of selectedMode">{{mode}} </span></p>

<hr />

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


export class SelectButtonDemo {

    types: SelectItem[];

    selectedType: string;

    selectedTypes: string[] = ['PayPal','MasterCard'];

    selectedModes: string[];

    modes: SelectItem[];

    constructor() {
        this.types = [
            {label: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'},
            {label: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'},
            {label: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'}
        ];

        this.modes = [
            {value: 'Bold', title: 'Bold', icon: 'fa fa-fw fa-bold'},
            {value: 'Italic', title: 'Italic', icon: 'fa fa-fw fa-italic'},
            {value: 'Underline', title: 'Underline', icon: 'fa fa-fw fa-underline'}
        ];
    }

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

}