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.
In multiple mode, model property refers to an array to populate the selected values.
<p-checkbox name="groupname" value="val1" [(model)]="selectedValues"></p-checkbox>
<p-checkbox name="groupname" value="val2" [(model)]="selectedValues"></p-checkbox>
export class ModelComponent {
selectedValues: string[] = [];
}
As model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked.
export class ModelComponent {
selectedValues: string[] = ['val1','val2'];
}
A boolean value can be bound using the checked property.
export class ModelComponent {
value: boolean;
}
<p-checkbox [(checked)]="value"></p-checkbox>
Name | Type | Default | Description |
---|---|---|---|
name | string | null | Name of the checkbox group. |
value | any | null | Value of the checkbox. |
model | any | null | An array of values to sync with two-way binding. |
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" [(model)]="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" [(model)]="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" [(model)]="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" [(model)]="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" [(model)]="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" [(model)]="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 [(checked)]="checked"></p-checkbox>
{{checked}}
export class CheckboxDemo {
selectedCities: string[] = [];
selectedCategories: string[] = ['Technology', 'Sports'];
checked: boolean = false;
}