Checkbox
KCheckbox - KCheckbox is a wrapper around a Kong styled checkbox input.
<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>
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.
<KCheckbox v-model="checked">
{{ checked ? 'Checked!' : 'Unchecked' }}
</KCheckbox>
label
Will place label text to the right of the checkbox. Can also be slotted.
<KCheckbox v-model="checked" label="Label Example" />
description
Will place description text under the checkbox label (required). Can also be slotted.
<KCheckbox v-model="checked" label="Label Example" description="Some subheader text" />
HTML attributes
Any valid attribute will be added to the input. You can read more about $attrs
here.
<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>
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
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>