Input Switch

KInputSwitch, similar to a checkbox, is used to toggle a value on and off.

Toggle

<KInputSwitch label="Toggle" v-model="switchValue" />

Props

v-model

Value to bind to the KInputSwitch.

Toggled off

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

Label

<KInputSwitch v-model="switchValue" label="Label" />

labelBefore

A boolean to place the label before the input switch. Defaults to false.

Label before

<KInputSwitch label-before label="Label before" v-model="switchValue" />

size

KInputSwitch comes in two sizes: small (default) and large.

Small

Large

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

Scale down this cluster first to enable editing

<KInputSwitch disabled disabled-tooltip-text="Scale down this cluster first to enable editing" v-model="switchValue" />

tooltipAttributes

Use the tooltipAttributes prop to configure the KTooltip's props when using the disabledTooltipText prop.

HTML Attributes

disabled

You can add the disabled attribute to disallow interactivity.

Disabled

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

Slotted label

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