SelectButton

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

Import #


import { SelectButtonModule } from 'primeng/selectbutton';

Basic #

SelectButton requires a value to bind and a collection of options.

One-Way
Return

<p-selectButton 
    [options]="stateOptions" 
    [(ngModel)]="value" 
    optionLabel="label" 
    optionValue="value" />

Reactive Forms #

SelectButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

Off
On

<form [formGroup]="formGroup">
    <p-selectButton 
        [options]="stateOptions" 
        formControlName="value" 
        optionLabel="label" 
        optionValue="value" />
</form>

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.

Option 1
Option 2
Option 3

<p-selectButton 
    [options]="paymentOptions" 
    [(ngModel)]="value" 
    [multiple]="true" 
    optionLabel="name" 
    optionValue="value" />

Template #

For custom content support define a ng-template with pTemplate where the local ng-template variable refers to an option in the options collection.


<p-selectButton 
    [options]="justifyOptions" 
    [(ngModel)]="value" 
    optionLabel="icon">
        <ng-template let-item pTemplate>
            <i [class]="item.icon"></i>
        </ng-template>
</p-selectButton>

Invalid #

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.

Off
On

<p-selectButton 
    [options]="stateOptions" 
    [(ngModel)]="value" 
    optionLabel="label" 
    optionValue="value" 
    class="ng-invalid ng-dirty" />

Disabled #

When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property.

Off
On
Option 1
Option 2

<p-selectButton 
    [options]="stateOptions" 
    [(ngModel)]="value1" 
    optionLabel="label"
    optionValue="value" 
    [disabled]="true" />

<p-selectButton 
    [options]="stateOptions2" 
    [(ngModel)]="value2" 
    optionLabel="label" 
    optionValue="value" 
    optionDisabled="constant" />

Accessibility #

Screen Reader

The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Value to describe an option is automatically set using the ariaLabel property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only.

Keyboard Support

KeyFunction
tabMoves focus to the buttons.
spaceToggles the checked state of a button.
PrimeNG 17.18.12 by PrimeTek