TriStateCheckbox

TriStateCheckbox is an extension to the Checkbox component with an additional state.

Import #


import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';

Basic #

A model can be bound using the standard ngModel directive.


<p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox" />

Reactive Forms #

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" />
    <label for="checked">
        {{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}
    </label>
</form>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<p-triStateCheckbox 
    [(ngModel)]="value" 
    variant="filled" 
    inputId="tricheckbox" />

Invalid #

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.


<p-triStateCheckbox 
    [(ngModel)]="value" 
    inputId="tricheckbox" 
    class="ng-dirty ng-invalid" />
<label for="tricheckbox">
    {{ value === null ? 'null' : value }}
</label>

Disabled #

When disabled is present, the element cannot be edited and focused.


<p-triStateCheckbox [(ngModel)]="value" [disabled]="true" />

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-checkboxContainer element
p-tristatechkboxContainer element
p-checkbox-boxContainer of icon.
p-checkbox-iconIcon element.

Accessibility #

Screen Reader

TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with ariaLabelledBy or ariaLabel 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 ariaLabelledBy="chkbox1" />

<p-triStateCheckbox ariaLabel="Remember Me" />

Keyboard Support

KeyFunction
tabMoves focus to the checkbox.
spaceToggles between the values.
enterToggles between the values.
PrimeNG 17.18.12 by PrimeTek