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

}

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.
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.

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" binary="true"></p-checkbox>
{{checked}}


export class CheckboxDemo {

    selectedCities: string[] = [];

    selectedCategories: string[] = ['Technology', 'Sports'];

    checked: boolean = false;
}