Checkbox

KCheckbox - KCheckbox is a wrapper around a Kong styled checkbox input.

<template>
  <KCheckbox
    v-model="checked"
    @change="handleToggle" />
</template>
<script>
export default {
  data() {
    return {
      checked: true
    }
  },
  methods: {
    handleToggle(isChecked) {
      // do something, make api call?
    }
  }
}
</script>

Props

v-model - required

Use v-model to bind the checked state of the underlying <input />. The v-model binds to the value prop of the component and sets current checked state of the input. You can read more about passing values via v-model here (opens new window).

<KCheckbox v-model="checked" />

html attributes

Any valid attribute will be added to the input. You can read more about $attrs here (opens new window).

<KCheckbox
  v-model="checked"
  disabled />

Slots

• default - Anything passed in to the default slot will replace the label prop text

<KCheckbox v-model="checkbox1">
  Label goes here. The checkbox is {{ checkbox1 ? 'checked' : 'not checked' }}
</KCheckbox>

<KCheckbox v-model="checkbox2">
  I agree to the <a :href="privacyPolicyURL">privacy policy</a>.
</KCheckbox>

Label goes here. The checkbox is checked

I agree to the privacy policy.

Theming

Variable	Purpose
--KCheckboxPrimary	KCheckbox checked background color
--KCheckboxDisabled	KCheckbox disabled background color
--KCheckboxDisabledChecked	KCheckbox disabled checked background color

An Example of changing the background color of KCheckbox to blueviolet might look like:

Note: We are scoping the overrides to a wrapper in this example

<template>
  <div class="KCheckbox-wrapper">
    <KCheckbox v-model="checked"/>
  </div>
</template>
<style>
.KCheckbox-wrapper {
  --KCheckboxPrimary: blueviolet;
}
</style>