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

TriCheckbox - 图1

Documentation

Import

  1. import {TriStateCheckboxModule} from 'primeng/tristatecheckbox';
  2.  

Getting Started

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

  1. <p-triStateCheckbox [(ngModel)]="value" label="Item Label"></p-triStateCheckbox>
  2.  
  1. export class ModelComponent {
  2. value: any;
  3. }
  4.  

Model Driven Forms

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

  1. <p-triStateCheckbox formControlName="property"></p-triStateCheckbox>
  2.  

Properties

NameTypeDefaultDescription
namestringnullName of the component.
labelstringnullLabel of the checkbox.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
tabindexnumbernullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the focus input to match a label defined for the component.
styleobjectnullInline style of the component.
styleClassstringnullStyle class of the component.

Events

NameParametersDescription
onChangeevent.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.

NameElement
ui-chkboxContainer element
ui-tristatechkboxContainer element
ui-chkbox-boxContainer of icon.
ui-chkbox-iconIcon element.

Dependencies

None.

Source

View on GitHub

  1. <h3 class="first">Value: {{value}}</h3>
  2. <p-triStateCheckbox [(ngModel)]="value" label="status"></p-triStateCheckbox>
  3.  
  1. export class TriStateCheckboxDemo {
  2. value: any;
  3. }
  4.