Source: https://primeng.org/checkbox

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

Checkbox

Checkbox is an extension to standard checkbox element with theming.

Import #

import { CheckboxModule } from 'primeng/checkbox';

Basic #

Binary checkbox is used as a controlled input with ngModel and binary properties.

<p-checkbox [(ngModel)]="checked" [binary]="true" />

Indeterminate #

The indeterminate state indicates that a checkbox is neither "on" or "off".

<p-checkbox [(ngModel)]="checked" [binary]="true" [indeterminate]="true" />

Group #

Multiple checkboxes can be grouped together.

Cheese

Mushroom

Pepper

Onion

<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>

Dynamic #

Checkboxes can be generated using a list of values.

Accounting

Marketing

Production

Research

<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>

Filled #

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" />

Sizes #

Checkbox provides small and large sizes as alternatives to the base.

Small

Normal

Large

<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>

Disabled #

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" />

Invalid #

The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms.

<p-checkbox [(ngModel)]="checked" [binary]="true" [invalid]="!checked" />

Forms #

Template Driven

Cheese

Mushroom

Pepper

Onion

Submit

<form #form="ngForm" (ngSubmit)="onSubmit(form)" class="flex flex-col gap-4"> <div class="flex flex-wrap gap-4"> @for (item of formKeys; track item) { <div class="flex items-center gap-2"> <p-checkbox [inputId]="item" [name]="item" [(ngModel)]="formModel[item]" [binary]="true" [invalid]="isInvalid()"></p-checkbox> <label [for]="item">{{ item | titlecase }}</label> </div> } </div> @if (isInvalid()) { <p-message severity="error" size="small" variant="simple"> At least one ingredient must be selected. </p-message> }

    <button pButton severity="secondary" type="submit">
        <span pButtonLabel>Submit</span>
    </button>
</form>

Reactive Forms

Checkbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

Cheese

Mushroom

Pepper

Onion

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-wrap gap-4"> @for (item of formKeys; track item) { <div class="flex items-center gap-2"> <p-checkbox [formControlName]="item" [binary]="true" [inputId]="item" [invalid]="isInvalid(item)" /> <label [for]="item"> {{ item | titlecase }} </label> </div> } </div> @if (hasAnyInvalid()) { <p-message severity="error" size="small" variant="simple"> At least one ingredient must be selected. </p-message> } <button pButton severity="secondary" type="submit"> <span pButtonLabel>Submit</span> </button> </form>

Accessibility #

Screen Reader

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"/>

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the checkbox. | | space | Toggles the checked state. |

• Import

• Basic

• Indeterminate

• Group

• Dynamic

• Filled

• Sizes

• Disabled

• Invalid

• Forms

  • Template Driven

  • Reactive Forms

• Accessibility

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

PrimeNG 20.3.0 by PrimeTek