Vuetify Checkbox Default Checked/Selected:Vuetify’s Checkbox component is designed to display a toggleable option that can be either checked or unchecked. By default, the Checkbox is unchecked, but its initial state can be set to checked by setting the v-model value. This can be useful in scenarios where you want to pre-select an option for the user, saving them the effort of having to do it themselves. Alternatively, if you have a default value for the Checkbox, setting the initial state to checked ensures that the user is aware of it. Overall, setting the v-model value to checked can enhance the user experience and make the Checkbox more intuitive to use.

How can you set a Vuetify checkbox to be checked by default?

This code creates a Vuetify container with three checkboxes for Vue, React, and Angular. The v-model directive binds the checked state of each checkbox to the selectedValue data property. The value attribute specifies the value of the checkbox when it’s checked.

The data method in the Vue app sets the selectedValue property to 'react' by default. When a user checks or unchecks a checkbox, the selectedValue property updates to reflect the new selection.

The selected value is displayed below the checkboxes using Vue’s curly brace syntax {{selectedValue}}.

Vuetify Checkbox Default Checked/Selected Example

<v-container>
    <v-checkbox v-model="selectedValue" label="Vue" value="vue"></v-checkbox>
    <v-checkbox v-model="selectedValue" label="React" value="react"></v-checkbox>
    <v-checkbox v-model="selectedValue" label="Angular" value="angular"></v-checkbox>
    <p>Selected Value: {{selectedValue}}</p>
</v-container>
<script type="module">
        const app = createApp({
            data() {
                return {
                    selectedValue: 'react'
                }
            },
        }).use(vuetify).mount('#app'); // Mount the app to the #app element
</script>

Output of Vuetify Checkbox Default Checked/Selected