Checkbox Checkbox is an extension to standard checkbox element with skinning capabilities.

Basic

Selected Cities: {{city}}

Preselection

Selected Categories: {{cat}}

Boolean - {{checked}}

Import


import {CheckboxModule} from 'primeng/primeng';

Getting Started

Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.

Multiple Values

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'];

}

Label

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>

Boolean Value

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>

Model Driven Forms

Checkbox can be used in a model driven form as well.


<p-checkbox formControlName="agreed"></p-checkbox>

Attributes

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.

Events

Name Parameters Description
onChange checked: Boolean value to represent new state of checkbox. Callback to invoke on checkbox click.

Styling

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.

Dependencies

None.


<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;
}