Checkbox

Overview

Use the checkbox component to prompt the user for one or more Boolean (true/false) values.

In Responsive UI, we primarilay use checkboxes for editing Boolean fields in a form, where the form is posted with a Save button. The user typically must take a separate action — i.e. pressing the Save button — for the checkbox state to take effect in the system.

Single Checkbox for a Form Field

When you have a single checkbox for a field in a form, place the field label in the left column and the checkbox input in the right column. This keeps all field labels on the left and all field value editors on the right, a standard previously established by the UI Committee. The checkbox displays without a label directly to the right of it since its field label is already displayed in the left column.

Multiple Checkboxes for a Form Field

A field that allows the user to select multiple options may display multiple checkboxes in the field value column on the right. The field label displays in the left column, with the checkboxes displaying in the column on the right. In addition, each checkbox displays a separate label for that individual option to the right of the checkbox. ÇThis is the only time a checkbox displays a label to its immediate right in Responsive UI.

Development

Web component development

Component reference

p-checkbox

Implementation

Begin by importing the CheckboxModule module into your application.

// import into app.module
import { CheckboxModule } from 'primeng/checkbox';

@NgModule({
    imports: [
        ...
        CheckboxModule,
        ...
    ]
})

export class AppModule(){}

Single Checkbox Example

The single checkbox approach is used to set a true/false value for an individual property.

Define a field for the boolean value in the controller, then add a p-checkbox instance for the field in the HTML. Bind the formControl property to the appropriate field in the form and set the binary property to a value of true.

<p-checkbox [formControl]="activeCustomer" [binary]="true"></p-checkbox>

Multiple Checkbox Example

The multiple checkbox approach is used to select one or more options from a list.

Import SelectItem from the PrimeNG API. Set up data for the checkbox options in the component or within a service.

import { SelectItem } from 'primeng/api';

...

const retirementAccountTypeList: SelectItem[] =
[
    { label: 'Money Market', value: 'Money Market' },
    { label: 'CD', value: 'CD' },
    { label: 'IRA', value: 'IRA' }
];

Add a p-checkbox instance to the HTML, iterating over the list of options. Specify the formControl for the form field, and a value and label for each checkbox.

<p-checkbox *ngFor="let account of retirementAccountTypeList" name="groupname"
    value="{{account.value}}" label="{{account.label}}" [formControl]="retirementAccountTypes">
</p-checkbox>

Angular component development

Component reference

p-checkbox

Implementation

Begin by importing the CheckboxModule module into your application.

// import into app.module
import { CheckboxModule } from 'primeng/checkbox';

@NgModule({
    imports: [
        ...
        CheckboxModule,
        ...
    ]
})

export class AppModule(){}

Single Checkbox Example

The single checkbox approach is used to set a true/false value for an individual property.

Define a field for the boolean value in the controller, then add a p-checkbox instance for the field in the HTML. Bind the formControl property to the appropriate field in the form and set the binary property to a value of true.

<p-checkbox [formControl]="activeCustomer" [binary]="true"></p-checkbox>

Multiple Checkbox Example

The multiple checkbox approach is used to select one or more options from a list.

Import SelectItem from the PrimeNG API. Set up data for the checkbox options in the component or within a service.

import { SelectItem } from 'primeng/api';

...

const retirementAccountTypeList: SelectItem[] =
[
    { label: 'Money Market', value: 'Money Market' },
    { label: 'CD', value: 'CD' },
    { label: 'IRA', value: 'IRA' }
];

Add a p-checkbox instance to the HTML, iterating over the list of options. Specify the formControl for the form field, and a value and label for each checkbox.

<p-checkbox *ngFor="let account of retirementAccountTypeList" name="groupname"
    value="{{account.value}}" label="{{account.label}}" [formControl]="retirementAccountTypes">
</p-checkbox>

Design

Figma design

Adobe XD design