DEV Community

Cover image for Angular TriStateCheckbox

Angular TriStateCheckbox

PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use to contact us.
・1 min read

Angular TriStateCheckbox is used to select either "true", "false" or "null" as the value.


Refer to PrimeNG setup documentation for download and installation steps for your environment.


import {TriStateCheckboxModule} from 'primeng/tristatecheckbox';
Enter fullscreen mode Exit fullscreen mode

Getting Started

TriStateCheckbox is defined using p-triStateCheckbox element and requires a value binding via ngModel.

<p-triStateCheckbox [(ngModel)]="value" label="Item Label"></p-triStateCheckbox>
Enter fullscreen mode Exit fullscreen mode
export class ModelComponent {

    value: any;

Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

TriStateCheckbox can be used in a model driven form as well.

<p-triStateCheckbox formControlName="property"></p-triStateCheckbox>
Enter fullscreen mode Exit fullscreen mode


TriStateCheckbox supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeNG TriStateCheckbox showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app