Checkbox

Augmented form field for boolean input.

Check me if you can

Config

The options below are to be set in the global configuration at the following location:

{
  components: {
    checkbox: { ... },
  },
}

class

Classes applied to the input element, except when the prop bare is set to true. See styling components.

• type: Array<String | Object> | Object | String | (props: Object) => {}
• default: null

Example

class({ checked }) {
    return ['checkbox', {
        'checkbox--checked': checked,
    }]
}

API

Name	Type	Default	Description
Props
variant	string|array	null	Useful when used in the component config class option, to style it conditionally. See styling components.
bare	boolean	false	Disable class inheritance from the component config. See styling components.
disabled	boolean	null	Set the HTML disabled attribute
required	boolean	null	Set the HTML required attribute
modelValue	any	null	Bind the Checkbox state with the parent component.
trueValue	any	true	Value set when the checkbox is checked.
falseValue	any	false	Value set when the checkbox is unchecked.
Events
update:modelValue

Examples

Controlled

<template>
  <CCheckbox v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: true, // Checked by default
    };
  },
};
</script>

Controlled with custom values

<template>
  <CCheckbox v-model="value" trueValue="on" falseValue="off" />
</template>

<script>
export default {
  data() {
    return {
      value: 'off', // Unchecked by default
    };
  },
};
</script>