import Checkbox from 'primevue/checkbox';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"></script>
Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.
<Checkbox v-model="checked" :binary="true" />
Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.
<Checkbox name="city" value="Chicago" v-model="cities" />
<Checkbox name="city" value="Los Angeles" v-model="cities" />
<Checkbox name="city" value="New York" v-model="cities" />
<Checkbox name="city" value="San Francisco" v-model="cities" />
export default {
data() {
return {
cities: []
}
}
}
As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | null | Value of the checkbox. |
| modelValue | any | null | Value binding of the checkbox. |
| name | string | null | Name of the input element. |
| binary | boolean | false | Allows to select a boolean value instead of multiple values. |
| trueValue | any | null | Value in checked state. |
| falseValue | any | null | Value in unchecked state. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| readonly | boolean | false | When present, it specifies that an input field is read-only. |
| required | boolean | false | When present, it specifies that the element is required. |
| tabindex | number | null | Index of the element in tabbing order. |
| inputId | string | null | Identifier of the underlying input element. |
| inputClass | any | null | Style class of the input field. |
| inputStyle | any | null | Inline style of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
In addition to the following events, any other valid events such as focus and blur are passed implicitly.
| Name | Parameters | Description |
|---|---|---|
| click | event: Browser event | Callback to invoke on value click. |
| change | event: Browser event | Callback to invoke on value change. |
| input | value: New value | Callback to invoke on value change. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-checkbox | Container element |
| p-checkbox-box | Container of icon. |
| p-checkbox-icon | Icon element. |
Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
<label for="chkbox1">Remember Me</label>
<Checkbox inputId="chkbox1" />
<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />
<Checkbox aria-label="Remember Me" />
| Key | Function |
|---|---|
| tab | Moves focus to the checkbox. |
| space | Toggles the checked state. |
None.