Checkbox is an extension to standard checkbox element with theming.
import { CheckboxModule } from 'primeng/checkbox';
Binary checkbox is used as a controlled input with ngModel and binary properties.
<p-checkbox [(ngModel)]="checked" [binary]="true" inputId="binary"></p-checkbox>
Checkbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form class="flex align-items-center gap-1" [formGroup]="formGroup">
<p-checkbox formControlName="city" value="New York" inputId="ny"></p-checkbox>
<label for="ny">New York</label>
</form>
Multiple checkboxes can be grouped together.
<div class="flex align-items-center gap-1">
<p-checkbox name="group1" value="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox>
<label for="ny">New York</label>
</div>
<div class="flex align-items-center gap-1">
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox>
<label for="sf">San Francisco</label>
</div>
<div class="flex align-items-center gap-1">
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></p-checkbox>
<label for="la">Los Angeles</label>
</div>
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>
Checkboxes can be generated using a list of values.
<div *ngFor="let category of categories" class="field-checkbox">
<p-checkbox name="group" [value]="category" [(ngModel)]="selectedCategories" [inputId]="category.key"></p-checkbox>
<label [for]="category.key">{{ category.name }}</label>
</div>
When disabled is present, the element cannot be edited and focused.
<p-checkbox [disabled]="true" [(ngModel)]="checked"></p-checkbox>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-checkbox | Container element |
p-checkbox-box | Container of icon. |
p-checkbox-icon | Icon element. |
p-checkbox-label | Label element. |
p-label-active | Label element of a checked state. |
p-label-focus | Label element of a focused state. |
p-label-disabled | Label element of a disabled state. |
Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props.
<label for="chkbox1">Remember Me</label>
<p-checkbox inputId="chkbox1"></p-checkbox>
<span id="chkbox2">Remember Me</span>
<p-checkbox aria-labelledby="chkbox2"></p-checkbox>
<p-checkbox aria-label="Remember Me"></p-checkbox>
Key | Function |
---|---|
tab | Moves focus to the checkbox. |
space | Toggles the checked state. |
API defines helper props, events and others for the PrimeNG Checkbox module.
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
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. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
ariaLabel | string | null | Used to define a string that labels the input element. |
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 | null | Icon class of the checkbox icon. |
readonly | boolean | false | When present, it specifies that the component cannot be edited. |
required | boolean | false | When present, it specifies that checkbox must be checked before submitting the form. |
trueValue | any | null | Value in checked state. |
falseValue | any | null | Value in unchecked state. |
Name | Parameters |
---|---|
icon | - |