import TriStateCheckbox from 'primevue/tristatecheckbox';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/tristatecheckbox/tristatecheckbox.min.js"></script>
A model can be bound using the standard v-model directive.
<TriStateCheckbox v-model="value" />
Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | boolean | null | Value of the component. |
| disabled | boolean | false | When specified, disables the component. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| inputId | string | null | Style class of the component input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
Any valid event such as focus and blur.
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-chkbox | Container element |
| p-tristatechkbox | Container element |
| p-chkbox-box | Container of icon. |
| p-chkbox-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
<span id="chkbox1">Remember Me</span>
<TriStateCheckbox aria-labelledby="chkbox1" />
<TriStateCheckbox aria-label="Remember Me" />
| Key | Function |
|---|---|
| tab | Moves focus to the checkbox. |
| space | Toggles between the values. |
| enter | Toggles between the values. |
None.