Checkbox is an extension to standard checkbox element with theming.
import { Checkbox } from 'primeng/checkbox';
Binary checkbox is used as a controlled input with ngModel and binary properties.
<p-checkbox [(ngModel)]="checked" [binary]="true" />
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 items-center gap-1" [formGroup]="formGroup">
<p-checkbox formControlName="city" value="New York" inputId="ny" />
<label for="ny" class="ml-2">New York</label>
</form>
When indeterminate is present, the checkbox masks the actual value visually.
<p-checkbox [(ngModel)]="checked" [binary]="true" [indeterminate]="true" />
Multiple checkboxes can be grouped together.
<div class="flex items-center">
<p-checkbox inputId="ingredient1" name="pizza"value="Cheese" [(ngModel)]="pizza" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex items-center">
<p-checkbox inputId="ingredient2" name="pizza" value="Mushroom" [(ngModel)]="pizza" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex items-center">
<p-checkbox inputId="ingredient3" name="pizza" value="Pepper" [(ngModel)]="pizza" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex items-center">
<p-checkbox inputId="ingredient4" name="pizza" value="Onion" [(ngModel)]="pizza" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
Checkboxes can be generated using a list of values.
<div *ngFor="let category of categories" class="flex items-center">
<p-checkbox [inputId]="category.key" name="group" [value]="category" [(ngModel)]="selectedCategories" />
<label [for]="category.key" class="ml-2"> {{ category.name }} </label>
</div>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<p-checkbox [(ngModel)]="checked" [binary]="true" variant="filled" />
Checkbox provides small and large sizes as alternatives to the base.
<div class="flex items-center gap-2">
<p-checkbox [(ngModel)]="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<p-checkbox [(ngModel)]="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<p-checkbox [(ngModel)]="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</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" styleClass="ng-invalid ng-dirty" />
When disabled is present, the element cannot be edited and focused.
<p-checkbox [(ngModel)]="checked1" [binary]="true" [disabled]="true" />
<p-checkbox [(ngModel)]="checked2" [binary]="true" [disabled]="true" />
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"/>
<span id="chkbox2">Remember Me</span>
<p-checkbox ariaLabelledBy="chkbox2"/>
<p-checkbox ariaLabel="Remember Me"/>
| Key | Function |
|---|---|
| tab | Moves focus to the checkbox. |
| space | Toggles the checked state. |