import {Checkbox} from 'primeng/primeng';
Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.
Multiple mode is enabled by default, ngModel property refers to an array to bind the selected values.
<p-checkbox name="groupname" value="val1" [(ngModel)]="selectedValues"></p-checkbox>
<p-checkbox name="groupname" value="val2" [(ngModel)]="selectedValues"></p-checkbox>
export class ModelComponent {
selectedValues: string[] = [];
}
As ngModel is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.
export class ModelComponent {
selectedValues: string[] = ['val1','val2'];
}
The label attribute provides a label text for the checkbox. This label is also clickable and toggles the checked state.
<p-checkbox name="groupname" value="val1" label="Value 1" [(ngModel)]="selectedValues"></p-checkbox>
<p-checkbox name="groupname" value="val2" label="Value 2" [(ngModel)]="selectedValues"></p-checkbox>
A single boolean value can be bound using the ngModel property as well by enabling the binary option.
export class ModelComponent {
value: boolean;
}
<p-checkbox [(ngModel)]="value" binary="true"></p-checkbox>
Checkbox can be used in a model driven form as well.
<p-checkbox formControlName="agreed"></p-checkbox>
Name | Type | Default | Description |
---|---|---|---|
name | string | null | Name of the checkbox group. |
value | any | null | Value of the checkbox. |
label | string | null | Label of the checkbox. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
binary | boolean | false | Allows to select a boolean value instead of multiple values. |
Name | Parameters | Description |
---|---|---|
onChange | checked: Boolean value to represent new state of checkbox. | Callback to invoke on checkbox click. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-chkbox | Container element |
ui-chkbox-box | Container of icon. |
ui-chkbox-icon | Icon element. |
ui-chkbox-label | Label element. |
Native component that requires css of PrimeUI Checkbox.
<h3 class="first">Basic</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities"></p-checkbox></div>
</div>
Selected Cities: <span *ngFor="let city of selectedCities" style="margin-right:10px">{{city}} </span>
<h3>Preselection</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-checkbox name="group2" value="Technology" label="Technology" [(ngModel)]="selectedCategories"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group2" value="Finance" label="Finance" [(ngModel)]="selectedCategories"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group2" value="Sports" label="Sports" [(ngModel)]="selectedCategories"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group2" value="Entertainment" label="Entertainment" [(ngModel)]="selectedCategories"></p-checkbox></div>
</div>
Selected Categories: <span *ngFor="let cat of selectedCategories" style="margin-right:10px">{{cat}} </span>
<h3>Boolean - {{checked}}</h3>
<p-checkbox [(ngModel)]="checked" binary="true"></p-checkbox>
export class CheckboxDemo {
selectedCities: string[] = [];
selectedCategories: string[] = ['Technology', 'Sports'];
checked: boolean = false;
}