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.

Off
On


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

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"></p-selectButton>
</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"></p-selectButton>

Template #

For custom content support define a ng-template 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>
        <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"></p-selectButton>

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)]="value" optionLabel="label" optionValue="value" [disabled]="true"></p-selectButton>
<p-selectButton [options]="stateOptions2" [(ngModel)]="value" optionLabel="label" optionValue="value" optionDisabled="constant"></p-selectButton>
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 aria-label 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 16.0.0-rc.2 by PrimeTek