Kongponents

# 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>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleToggle(isChecked) {
      // do something, make api call?
    }
  }
}
</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 (opens new window).

<KInputSwitch v-model="isChecked" />

# label

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

  • label
<KInputSwitch v-model="checked" :label="checked ? 'on' : 'off'" />

# labelPosition

  • label-position

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.

  • disabled
<KInputSwitch v-model="checked" label="disabled" disabled />

# disabledTooltipText

You can specify tooltip text to be displayed when the switch is disabled.

  • disabledTooltipText
<KInputSwitch
  v-model="checked"
  label="disabled"
  disabled
  disabledTooltipText="I'm disabled!"
/>

# enabledIcon

Display a check icon when switch is enabled

  • enabledIcon
<KInputSwitch
  v-model="enabledIconChecked"
  :label="enabledIconChecked ? 'Enabled' : 'Disabled'"
  enabled-icon
/>

# Slots

  • label
<template>
  <KInputSwitch v-model="checked">
    <template v-slot:label>
      {{ labelText }}
    </template>
  </KInputSwitch>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  computed: {
    labelText() {
      return this.checked ? 'Yay!' : 'Boo'
    }
  }
}
</script>

# 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>
export default {
  data() {
    return {
      checked: true
    }
  }
}
</script>

<style>
.switch-wrapper {
  --KInputSwitchOn: hotpink;
  --KInputSwitchBackground: black;
}
</style>

← Table →