Skip to content
On this page

Checkbox

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

html
<template>
  <KCheckbox
    v-model="checked"
    @change="handleToggle" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent ({
  setup(props) {
    const checked = ref(true)

    const handleToggle = (): void => {
      // do something, make api call?
    }

    return {
      checked,
      handleToggle,
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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.

html
<KCheckbox v-model="checked">
  {{ checked ? 'Checked!' : 'Unchecked' }}
</KCheckbox>
1
2
3

label

Will place label text to the right of the checkbox. Can also be slotted.

html
<KCheckbox v-model="checked" label="Label Example" />
1

description

Will place description text under the checkbox label (required). Can also be slotted.

html
<KCheckbox v-model="checked" label="Label Example" description="Some subheader text" />
1

HTML attributes

Any valid attribute will be added to the input. You can read more about $attrs here.

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

Slots

  • default - Anything passed in to the default slot will replace the label prop text
html
<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>
1
2
3
4
5
6
7

Events

KCheckbox has a couple of natural event bindings that all emit the same data.

  • input - Fired on change, returns the checked status of the checkbox.
  • change - Fired on change, returns the checked status of the checkbox.
  • update:modelValue - Fired on change, returns the checked status of the checkbox.

Theming

VariablePurpose
--KCheckboxPrimaryKCheckbox checked background color
--KCheckboxDisabledKCheckbox disabled background color
--KCheckboxDisabledCheckedKCheckbox 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

html
<template>
  <div class="KCheckbox-wrapper">
    <KCheckbox v-model="checked"/>
  </div>
</template>

<style>
.KCheckbox-wrapper {
  --KCheckboxPrimary: blueviolet;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

Released under the Apache-2.0 License.