Input Switch
KInputSwitch, similar to a checkbox, is used to toggle a value on and off.
html
<KInputSwitch label="Toggle" v-model="switchValue" />Props
v-model
Value to bind to the KInputSwitch.
html
<KInputSwitch v-model="switchValue" :label="switchValue ? 'Toggled on' : 'Toggled off'" />label
A string of text to display as a label after the input switch. The label can also be slotted.
html
<KInputSwitch v-model="switchValue" label="Label" />labelBefore
A boolean to place the label before the input switch. Defaults to false.
html
<KInputSwitch label-before label="Label before" v-model="switchValue" />size
KInputSwitch comes in two sizes: small (default) and large.
html
<KInputSwitch size="small" label="Small" v-model="switchValue1" />
<KInputSwitch size="large" label="Large" v-model="switchValue2" />disabledTooltipText
Use this prop to display tooltip text when KInputSwitch is disabled.
html
<KInputSwitch disabled disabled-tooltip-text="Scale down this cluster first to enable editing" v-model="switchValue" />HTML Attributes
disabled
You can add the disabled attribute to disallow interactivity.
html
<KInputSwitch disabled v-model="switchValue" label="Disabled" />Slots
label
Provide slotted content for the input switch label. This slot takes precedence over the label prop if both are provided.
html
<template>
<KInputSwitch v-model="switchValue">
<template #label>
Slotted label
</template>
</KInputSwitch>
</template>Events
KInputSwitch emits a few events with the same payload.
input and update:modelValue
Payload is input value (boolean).
change
Payload is a boolean indicating the toggle value.