# Checkbox

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

    @change="handleToggle" />
export default {
  data() {
    return {
      checked: true
  methods: {
    handleToggle(isChecked) {
      // do something, make api call?

# 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).

  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 v-model="checkbox2">
  I agree to the <a :href="privacyPolicyURL">privacy policy</a>.

# 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

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