import {TriStateCheckboxModule} from 'primeng/tristatecheckbox';
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;
}
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. |
None.
<h3 class="first">Value: {{value}}</h3>
<p-triStateCheckbox [(ngModel)]="value" label="status"></p-triStateCheckbox>
export class TriStateCheckboxDemo {
value: any;
}