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">
<p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza"></p-checkbox>
</div>
<div class="flex align-items-center">
<p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza"></p-checkbox>
</div>
<div class="flex align-items-center">
<p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza"></p-checkbox>
</div>
<div class="flex align-items-center">
<p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza"></p-checkbox>
</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 [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories"></p-checkbox>
</div>
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<p-checkbox [(ngModel)]="checked" [binary]="true" inputId="binary" class="ng-invalid ng-dirty"></p-checkbox>
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 ariaLabelledBy, ariaLabel props.
<label for="chkbox1">Remember Me</label>
<p-checkbox inputId="chkbox1"></p-checkbox>
<span id="chkbox2">Remember Me</span>
<p-checkbox ariaLabelledBy="chkbox2"></p-checkbox>
<p-checkbox ariaLabel="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.
Checkbox is an extension to standard checkbox element with theming.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onChange | event : CheckboxChangeEvent | Callback to invoke on value change. | |
| onFocus | event : Event | Callback to invoke when the receives focus. | |
| onBlur | event : Event | Callback to invoke when the loses focus. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom change event.