SelectButton is used to choose single or multiple items from a list using buttons.
import { SelectButtonModule } from 'primeng/selectbutton';
SelectButton requires a value to bind and a collection of options.
<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value"></p-selectButton>
SelectButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-selectButton [options]="stateOptions" formControlName="value" optionLabel="label" optionValue="value"></p-selectButton>
</form>
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.
<p-selectButton [options]="paymentOptions" [(ngModel)]="value" [multiple]="true" optionLabel="name" optionValue="value"></p-selectButton>
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 state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value" class="ng-invalid ng-dirty"></p-selectButton>
When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property.
<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>
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.
Key | Function |
---|---|
tab | Moves focus to the buttons. |
space | Toggles the checked state of a button. |
API defines helper props, events and others for the PrimeNG SelectButton module.
Name | Type | Default | Description |
---|---|---|---|
options | array | null | An array of selectitems to display as the available options. |
optionLabel | string | label | Name of the label field of an option. |
optionValue | string | value | Name of the value field of an option. |
optionDisabled | string | disabled | Name of the disabled field of an option. |
multiple | boolean | false | When specified, allows selecting multiple values. |
tabindex | number | 0 | Index of the element in tabbing order. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
dataKey | string | null | A property to uniquely identify a value in options. |
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. |