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

Value: {{value}}


import {TriStateCheckboxModule} from 'primeng/tristatecheckbox';

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>

export class ModelComponent {

    value: any;


Model Driven Forms

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

<p-triStateCheckbox formControlName="property"></p-triStateCheckbox>


Name Type Default Description
name string null Name of the component.
label string null Label of the checkbox.
disabled boolean false When present, it specifies that the element should be disabled.
tabindex number null Index of the element in tabbing order.
inputId string null Identifier of the focus input to match a label defined for the component.
style object null Inline style of the component.
styleClass string null Style class of the component.


Name Parameters Description
onChange event.originalEvent: Original browser event
event.value: Current value.
Callback to invoke on value change.


Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-chkbox Container element
ui-tristatechkbox Container element
ui-chkbox-box Container of icon.
ui-chkbox-icon Icon element.



View on GitHub

<h3 class="first">Value: {{value}}</h3>
<p-triStateCheckbox [(ngModel)]="value" label="status"></p-triStateCheckbox>

export class TriStateCheckboxDemo {

    value: any;