📄 primeng/selectbutton

File: selectbutton.md | Updated: 11/15/2025

Source: https://primeng.org/selectbutton

PassThrough Attributes just landed ✅Learn More

  • SearchK

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

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

<p-selectbutton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value" aria-labelledby="basic" />

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 1Option 2Option 3

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

Template #

For custom content support define a template named item where the default local template variable refers to an option.

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

Sizes #

SelectButton provides small and large sizes as alternatives to the base.

BeginnerExpertBeginnerExpertBeginnerExpert

<p-selectbutton [(ngModel)]="value1" [options]="options" size="small" /> <p-selectbutton [(ngModel)]="value2" [options]="options" /> <p-selectbutton [(ngModel)]="value3" [options]="options" size="large" />

Fluid #

The fluid prop makes the component take up the full width of its container when set to true.

One-WayReturn

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

Disabled #

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

OffOnOption 1Option 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" />

Invalid #

The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms.

One-WayReturn

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

Forms #

Template Driven

One-WayReturn

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex justify-center flex-col gap-4"> <div class="flex flex-col gap-1"> <p-selectbutton #model="ngModel" [(ngModel)]="value" [options]="stateOptions" optionLabel="label" optionValue="value" [invalid]="model.invalid && (model.touched || exampleForm.submitted)" required name="value" /> @if (model.invalid && (model.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Selection is required.</p-message> } </div> <button pButton type="submit"><span pButtonLabel>Submit</span></button> </form>

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.

One-WayReturn

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-selectbutton [options]="stateOptions" formControlName="value" [invalid]="isInvalid('value')" optionLabel="label" optionValue="value" /> @if (isInvalid('value')) { <p-message severity="error" size="small" variant="simple">Selection is required</p-message> } </div> <button pButton type="submit"><span pButtonLabel>Submit</span></button> </form>

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

| Key | Function | | --- | --- | | tab | Moves focus to the buttons. | | space | Toggles the checked state of a button. |

  • Import

  • Basic

  • Multiple

  • Template

  • Sizes

  • Fluid

  • Disabled

  • Invalid

  • Forms

    • Template Driven

    • Reactive Forms

  • Accessibility

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

Learn More

PrimeNG 20.3.0 by PrimeTek