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

Value: {{value}}

Import


import {TriStateCheckboxModule} from 'primeng/primeng';

Getting Started

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


<p-triStateCheckbox [(ngModel)]="value"></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>

Attributes

Name Type Default Description
name string null Name of the component.
disabled boolean false When present, it specifies that the element should be disabled.

Events

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

Styling

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.

Dependencies

None.


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


export class TriStateCheckboxDemo {

    value: any;
    
}