Checkbox is an extension to standard checkbox element with theming.
import Checkbox from 'primevue/checkbox';
Binary checkbox is used as a controlled input with v-model and binary properties.
<Checkbox v-model="checked" :binary="true" />
Multiple checkboxes can be grouped together.
<div class="card flex flex-wrap justify-content-center gap-3">
<div class="flex align-items-center">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex align-items-center">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex align-items-center">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex align-items-center">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
</div>
Checkboxes can be generated using a list of values.
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
Invalid state style is added using the p-invalid class to indicate a failed validation.
<Checkbox v-model="checked" class="p-invalid" binary />
When disabled is present, the element cannot be edited and focused.
<Checkbox v-model="checked" disabled />
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<label for="chbx">I've read and accept the terms & conditions.</label>
<Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
<small class="p-error" id="chbx-error">{{ errorMessage || ' ' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
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 inputId 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. |