Skip to content
On this page

Input Switch

KInputSwitch is used a like checkbox and is meant to toggle settings on and off.

html
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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.

html
<KInputSwitch v-model="isChecked" />
1

label

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

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

labelPosition

Position the label to the left or right of the switch, default to right.



html
<KInputSwitch label="Label on the right" />
<KInputSwitch label="Label on the left" label-position="left" />
1
2

disabled

You can add disabled to the input to disallow interactivity.

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

disabledTooltipText

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

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

enabledIcon

Display a check icon when switch is enabled

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

Slots

  • label
html
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Events

To listen for changes to the KInputSwitch value, you can bind to the @input, @change, or @update:modelValue events:

html
<template>
  <KInputSwitch
    :model-value="false"
    :label="eventsSwitchEnabled ? 'Enabled' : 'Disabled'"
    @update:modelValue="newValue => eventsSwitchEnabled = newValue"
  />
</template>
1
2
3
4
5
6
7

KInputSwitch transparently binds to events:

You've toggled me 0 time(s)
html
<template>
  <div>
    <KInputSwitch v-model="eventsSwitchEnabled2" @change="e => (changeCount++)" label="Toggle Me" />
    <div>You've toggled me {{ changeCount }} time(s)</div>
  </div>
</template>
1
2
3
4
5
6

Theming

VariablePurpose
--KInputSwitchBackgroundSwitch off state background color
--KInputSwitchOnSwitch on background color
--KInputSwitchLabelLabel 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

html
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Released under the Apache-2.0 License.