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

import TriStateCheckbox from 'primevue/tristatecheckbox';

A model can be bound using the standard v-model directive.

Not Selected

<TriStateCheckbox v-model="value" />

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

Not Selected

<TriStateCheckbox v-model="value" class="p-invalid" />

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

Not Selected

<TriStateCheckbox v-model="value" />

Compatibility with popular Vue form libraries.

VeeValidate is a popular library for handling forms in Vue.

Not Selected
* I've read and accept the terms & conditions.

<div class="card flex justify-content-center">
    <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
        <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
        <div>* I've read and accept the terms & conditions.</div>
        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
        <Button type="submit" label="Submit" />

Screen Reader

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>
<TriStateCheckbox aria-labelledby="chkbox1" />

<TriStateCheckbox aria-label="Remember Me" />

Keyboard Support

tabMoves focus to the checkbox.
spaceToggles between the values.
enterToggles between the values.