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

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

}

Boolean Value

A boolean value can be bound using the checked property.


export class ModelComponent {

    value: boolean;

}


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

Attributes

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.

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" [(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;
}