Vue Checkbox is an extension to standard checkbox element with theming. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Checkbox from 'primevue/checkbox';
Getting Started
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 Values
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.
Theming
Checkbox supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Checkbox showcase for demos and documentation.