Checkbox

Component source on Github This page on Github

Reference

v-modelundefined
ArrayBooleanObject
Checkbox v-model
base"checkbox"
String
Base name used to style component
labelempty string
String
Checkbox label
mod-checkboxempty string
String
Style of the main input element
mod-labelempty string
String
Style of the label element
nameempty string
String
Name of the component
rules[]
Object
Rules for validation. See Form Validation for examples of rules
validate-mode"silent"
String
Valid values are 'silent' or 'eager'. See Form Validation for explanation and examples
validate-on"blur"
String
Valid values are 'blur', 'immediate' or 'form'. See Form Validation for explanation and examples
validation-statenull
String
Overrides state of input validity. Supported values are 'valid', 'invalid', empty string for default state or null for component controlled state
variantempty string
String
Active variant of the element mod-* props
Components
v-checkbox-simple
v-checkbox-simple is a lighter, simpler checkbox variant that can be used in lists, tables etc.
v-checkbox-group
Checkboxes can be optionally wrapped with v-checkbox-group component to create group with single v-model and additional validation rules

Notes

Simple checkbox

v-checkbox-simple is a lighter, simpler checkbox variant that can be used in lists, tables etc. Simple checkbox only has mod-checkbox and base prop. It does not allow v-model but :checked prop and @changed event can be used instead.

Example - props

    <template>
  <v-checkbox
    v-model="example.model"
    :validationState="example.validationState"
    :label="example.label"
  />

</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";

let example = reactive({
  model: true,
  label: "Example checkbox",
});

let events = ref([]);
</script>

Example - checkbox group

Checkboxes can be optionally wrapped with v-checkbox-group to create group with single v-model. Group allows more validation options.

Languages: []
    <template>
  <v-checkbox-group v-model="languages">
    <v-checkbox
      v-for="l in languagesData"
      :value="l"
      :id="'language-' + l"
      :label="l"
      class="my-2"
    ></v-checkbox>
  </v-checkbox-group>

  <div class="mt-5">
    <span class="font-semibold">Languages:</span>
    {{ languages }}
  </div>
</template>
  

    
  

  
    <script setup>
import { ref } from "vue";

let languages = ref([]);

let languagesData = ref([
  "english",
  "swedish",
  "korean",
  "german",
  "icelandic",
  "japanese",
]);
</script>