VCheckbox
The VCheckbox component provides a checkbox input with label, validation, and indeterminate state support. It wraps VCheckboxBtn with VInput for consistent form field styling.
Basic Usage
<template>
<VCheckbox
v-model="checked"
label="I agree to the terms"
/>
</template>
<script setup>
import { ref } from 'vue'
const checked = ref(false)
</script>
The checkbox value. Can be boolean, array, or custom true/false values.
Label text to display next to the checkbox.
The value used when the checkbox is checked (useful for arrays).
The value when checked in single checkbox mode.
The value when unchecked in single checkbox mode.
Display the checkbox in an indeterminate state.
indeterminateIcon
string
default:"$checkboxIndeterminate"
Icon to display when in indeterminate state.
trueIcon
string
default:"$checkboxOn"
Icon to display when checked.
falseIcon
string
default:"$checkboxOff"
Icon to display when unchecked.
Color of the checkbox when checked.
Make the checkbox readonly (cannot be changed by user).
Put the checkbox in an error state.
Validation rules for the checkbox.
Enable ripple effect on click.
Multiple Checkboxes with Array
<template>
<div>
<VCheckbox
v-model="selected"
label="Red"
value="red"
/>
<VCheckbox
v-model="selected"
label="Green"
value="green"
/>
<VCheckbox
v-model="selected"
label="Blue"
value="blue"
/>
<p>Selected: {{ selected }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>
Custom True/False Values
<template>
<VCheckbox
v-model="status"
label="Active"
:true-value="'active'"
:false-value="'inactive'"
/>
</template>
<script setup>
import { ref } from 'vue'
const status = ref('inactive')
</script>
Indeterminate State
<template>
<div>
<VCheckbox
v-model="selectAll"
:indeterminate="indeterminate"
label="Select All"
@click="toggleAll"
/>
<VCheckbox
v-for="item in items"
:key="item.id"
v-model="selected"
:value="item.id"
:label="item.name"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]
const selected = ref([])
const selectAll = computed({
get: () => selected.value.length === items.length,
set: (value) => {
if (value) {
selected.value = items.map(item => item.id)
} else {
selected.value = []
}
}
})
const indeterminate = computed(() =>
selected.value.length > 0 && selected.value.length < items.length
)
function toggleAll() {
if (selected.value.length === items.length) {
selected.value = []
} else {
selected.value = items.map(item => item.id)
}
}
</script>
With Validation
<template>
<VCheckbox
v-model="agreed"
label="I agree to the terms and conditions"
:rules="[v => !!v || 'You must agree to continue']"
/>
</template>
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
Emitted when the checkbox value changes.
update:focused
(focused: boolean) => void
Emitted when the focus state changes.
Emitted when the indeterminate state changes.
Customize the label content.
Customize the input element.