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 if name property is present, 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'];
}
A single boolean value can be bound using the ngModel property as well.
export class ModelComponent {
value: boolean;
}
<p-checkbox [(ngModel)]="value"></p-checkbox>
Checkbox can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-checkbox ngControl="agreed"></p-checkbox>
Name | Type | Default | Description |
---|---|---|---|
name | string | null | Name of the checkbox group. |
value | any | null | Value of the checkbox. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
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. |
Native component that requires css of PrimeUI Checkbox.
<h3 class="first">Basic</h3>
<div class="ui-grid ui-grid-responsive" style="width:250px;margin-bottom:10px">
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group1" value="New York" [(ngModel)]="selectedCities"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">New York</label></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group1" value="San Francisco" [(ngModel)]="selectedCities"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">San Francisco</label></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group1" value="Los Angeles" [(ngModel)]="selectedCities"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">Los Angeles</label></div>
</div>
</div>
Selected Cities: <span *ngFor="#city of selectedCities">{{city}} </span>
<h3>Preselection</h3>
<div class="ui-grid ui-grid-responsive" style="width:250px;margin-bottom:10px">
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group2" value="Technology" [(ngModel)]="selectedCategories"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">Technology</label></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group2" value="Finance" [(ngModel)]="selectedCategories"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">Finance</label></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group2" value="Sports" [(ngModel)]="selectedCategories"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">Sports</label></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-1"><p-checkbox name="group2" value="Entertainment" [(model)]="selectedCategories"></p-checkbox></div>
<div class="ui-grid-col-11"><label class="ui-widget">Entertainment</label></div>
</div>
</div>
Selected Categories: <span *ngFor="#cat of selectedCategories">{{cat}} </span>
<h3>Boolean</h3>
<p-checkbox [(ngModel)]="checked"></p-checkbox>
{{checked}}
export class CheckboxDemo {
selectedCities: string[] = [];
selectedCategories: string[] = ['Technology', 'Sports'];
checked: boolean = false;
}