TriStateCheckbox is an extension to the Checkbox component with an additional state.
import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
A model can be bound using the standard ngModel directive.
<p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
TriStateCheckbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
<p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
<label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
</form>
When disabled is present, the element cannot be edited and focused.
<p-triStateCheckbox [(ngModel)]="value" [disabled]="true"></p-triStateCheckbox>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-checkbox | Container element |
| p-tristatechkbox | Container element |
| p-checkbox-box | Container of icon. |
| p-checkbox-icon | Icon element. |
TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with aria-labelledby or aria-label props. Component adds an element with aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the aria property from the locale API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
<span id="chkbox1">Remember Me</span>
<p-triStateCheckbox aria-labelledby="chkbox1"></p-triStateCheckbox>
<p-triStateCheckbox aria-label="Remember Me"></p-triStateCheckbox>
| Key | Function |
|---|---|
| tab | Moves focus to the checkbox. |
| space | Toggles between the values. |
| enter | Toggles between the values. |
API defines helper props, events and others for the PrimeNG TriStateCheckbox module.
| 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. |
| ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| style | object | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| readonly | boolean | false | When present, it specifies that the component cannot be edited. |
| checkboxTrueIcon | string | null | Specifies the icon for checkbox true value. |
| checkboxFalseIcon | string | null | Specifies the icon for checkbox false value. |
| Name | Parameters | Description |
|---|---|---|
| onChange | event.originalEvent: Original browser event event.value: Current value. | Callback to invoke on value change. |
| Name | Parameters |
|---|---|
| checkicon | - |
| uncheckicon | - |