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

Basic

Selected Cities: {{city}}   

Preselection

Selected Categories: {{cat}}   

Boolean


{{checked}}

Import


import {Checkbox} 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 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'];

}

Boolean Value

A single boolean value can be bound using the ngModel property as well.


export class ModelComponent {

    value: boolean;

}


<p-checkbox [(ngModel)]="value"></p-checkbox>

Model Driven Forms

Checkbox can be used in a model driven form as well by defining ngFormControl or ngControl.


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

Attributes

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.

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.

Dependencies

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="let 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="let 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;
}