TriStateCheckboxTriStateCheckbox is used to select either "true", "false" or "null" as the value.
Documentation
Import
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>
Properties
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. |
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.
Source
<h3 class="first">Value: {{value}}</h3>
<p-triStateCheckbox [(ngModel)]="value" label="status"></p-triStateCheckbox>
export class TriStateCheckboxDemo {
value: any;
}