KongponentsInput Switch
KInputSwitch is used a like checkbox and is meant to toggle settings on and off.
<template>
<KInputSwitch v-model="defaultChecked" @change="handleToggle" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const checked = ref(false)
const handleToggle = (isChecked: boolean) => {
// do something, make api call?
}
return {
checked,
handleToggle,
}
}
})
</script>Props
v-model - required
Use v-model to bind to the checked state of the underlying <input />. The v-model binds to the value prop of the component and sets current checked state of toggle switch. You can read more about passing values via v-model here.
<KInputSwitch v-model="isChecked" />label
Will place label text to the right of the switch. Can also be slotted.
<KInputSwitch v-model="checked" :label="checked ? 'on' : 'off'" />labelPosition
Position the label to the left or right of the switch, default to right.
<KInputSwitch label="Label on the right" />
<KInputSwitch label="Label on the left" label-position="left" />disabled
You can add disabled to the input to disallow interactivity.
<KInputSwitch v-model="checked" label="disabled" disabled />disabledTooltipText
You can specify tooltip text to be displayed when the switch is disabled.
<KInputSwitch v-model="checked" label="disabled" disabled disabledTooltipText="I'm disabled!" />enabledIcon
Display a check icon when switch is enabled
<KInputSwitch v-model="enabledIconChecked" :label="enabledIconChecked ? 'Enabled' : 'Disabled'" enabled-icon />Display a check icon when switch is enabled with label positioned to the left
<KInputSwitch v-model="enabledIconChecked" :label="enabledIconChecked ? 'Enabled' : 'Disabled'" labelPosition="left" enabled-icon />Slots
label
<template>
<KInputSwitch v-model="checked">
<template v-slot:label>
{{ labelText }}
</template>
</KInputSwitch>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
setup () {
const checked = ref(false)
const labelText = computed(() => checked.value ? 'Yay!' : 'Boo')
return {
checked,
labelText,
}
}
})
</script>Events
To listen for changes to the KInputSwitch value, you can bind to the @input, @change, or @update:modelValue events:
<template>
<KInputSwitch
:model-value="false"
:label="eventsSwitchEnabled ? 'Enabled' : 'Disabled'"
@update:modelValue="newValue => eventsSwitchEnabled = newValue"
/>
</template>KInputSwitch transparently binds to events:
<template>
<div>
<KInputSwitch v-model="eventsSwitchEnabled2" @change="e => (changeCount++)" label="Toggle Me" />
<div>You've toggled me {{ changeCount }} time(s)</div>
</div>
</template>Theming
| Variable | Purpose |
|---|---|
--KInputSwitchBackground | Switch off state background color |
--KInputSwitchOn | Switch on background color |
--KInputSwitchLabel | Label font color |
An Example of changing the success KInputSwitch on color to pink instead of Kong's primary blue might look like.
Note: We are scoping the overrides to a wrapper in this example
<template>
<div class="switch-wrapper">
<KInputSwitch v-model="checked" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const checked = ref(true)
return {
checked,
}
}
})
</script>
<style>
.switch-wrapper {
--KInputSwitchOn: hotpink;
--KInputSwitchBackground: black;
}
</style>