How to Use v-model with Checkbox in Vue

Use v-model on a checkbox input to bind its checked state to a data property. For a single checkbox, bind to a Boolean; for multiple checkboxes, bind to an array to track selected values.

Syntax

Use v-model on an <input type="checkbox"> element to bind its checked state to a Vue data property.

• For a single checkbox, bind to a Boolean variable.
• For multiple checkboxes, bind to an array that holds selected values.

html

<input type="checkbox" v-model="isChecked"> Single checkbox binding

<input type="checkbox" v-model="selectedOptions" value="option1"> Option 1
<input type="checkbox" v-model="selectedOptions" value="option2"> Option 2

Example

This example shows a single checkbox bound to a Boolean and multiple checkboxes bound to an array. The checked states update the data properties automatically.

vue

<template>
  <div>
    <h3>Single Checkbox</h3>
    <label>
      <input type="checkbox" v-model="isSubscribed">
      Subscribe to newsletter
    </label>
    <p>Subscribed: {{ isSubscribed }}</p>

    <h3>Multiple Checkboxes</h3>
    <label>
      <input type="checkbox" v-model="selectedFruits" value="Apple">
      Apple
    </label>
    <label>
      <input type="checkbox" v-model="selectedFruits" value="Banana">
      Banana
    </label>
    <label>
      <input type="checkbox" v-model="selectedFruits" value="Cherry">
      Cherry
    </label>
    <p>Selected fruits: {{ selectedFruits.join(", ") }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isSubscribed = ref(false)
const selectedFruits = ref([])
</script>

Output

Single Checkbox
[ ] Subscribe to newsletter
Subscribed: false

Multiple Checkboxes
[ ] Apple  [ ] Banana  [ ] Cherry
Selected fruits: 

Common Pitfalls

1. Binding a single checkbox to an array: This causes unexpected behavior because a single checkbox expects a Boolean, not an array.

2. Forgetting the value attribute on multiple checkboxes: Without value, Vue cannot track which items to add or remove from the array.

html

<!-- Wrong: single checkbox bound to array -->
<input type="checkbox" v-model="selectedItems">

<!-- Right: single checkbox bound to Boolean -->
<input type="checkbox" v-model="isSelected">

<!-- Wrong: multiple checkboxes without value -->
<input type="checkbox" v-model="selectedItems">
<input type="checkbox" v-model="selectedItems">

<!-- Right: multiple checkboxes with value -->
<input type="checkbox" v-model="selectedItems" value="item1">
<input type="checkbox" v-model="selectedItems" value="item2">

Quick Reference

• Use v-model with a Boolean for single checkboxes.
• Use v-model with an array and value attributes for multiple checkboxes.
• Checked state updates automatically when user clicks.
• Display bound data to confirm selections.

Key Takeaways

Use v-model with a Boolean for single checkbox binding.

Use v-model with an array and value attributes for multiple checkboxes.

Always include the value attribute on multiple checkboxes for correct tracking.

v-model keeps the checkbox state and data property in sync automatically.

Avoid binding a single checkbox to an array to prevent bugs.