Input - Checkbox - 《PrimeNG Document》

Documentation
Source

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

Documentation

Import


import {CheckboxModule} from 'primeng/checkbox';

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. In this case, due to an issue in Angular bind the formControl instance instead of using formControlName.


<!-- Wrong -->
<p-checkbox formControlName="cities"></p-checkbox>
<!-- Correct -->
<p-checkbox [formControl]="myFormGroup.controls['cities']"></p-checkbox>

Properties

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.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
style	object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
labelStyleClass	string	null	Style class of the label.
checkboxIcon	string	pi pi-check	Icon class of the checkbox icon.

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.
ui-label-active	Label element of a checked state.
ui-label-focus	Label element of a focused state.
ui-label-disabled	Label element of a disabled state.

Dependencies

None.

Source

View on GitHub


<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" inputId="ny"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></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" inputId="technology"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Finance" label="Finance" [(ngModel)]="selectedCategories" inputId="finance"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Sports" label="Sports" [(ngModel)]="selectedCategories" inputId="sports"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Entertainment" label="Entertainment" [(ngModel)]="selectedCategories" inputId="entertainment"></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;
}