wt-switcher.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
label		string	''	Switcher label text
labelLeft		boolean	false	Positions label to the left of the switcher
disabled		boolean	false	Disables the switcher
labelProps		LabelProps	() => ({})	Object with props, passed down to wt-label as props
controlled		boolean	false	For controlled mode, when need to sync visual state with model

Events

Name	Params	Description
update:modelValue

Slots

Name	Scope	Description
label		Custom input label

Important

In cc-history, cc-quality-auditor, cc-supervisor, cc-workspaces, client, crm, use v-model:model-value instead of the standard v-model, because of compat vue 2 different behavior

TIP

✅ Correct: <wt-switcher v-model:model-value="value" />

❌ Incorrect: <wt-switcher v-model="value" />

Example Switcher

Switcher

Code

<script setup>
import { ref } from 'vue';

const value = ref(false);
</script>

<template>
  <wt-switcher
    v-model="value"
    label="Switcher"
  />
</template>

<style scoped lang="scss"></style>

Example Disabled Switcher

Disabled Active Switcher

Disabled Inactive Switcher

Code

<script setup></script>

<template>
  <wt-switcher
    :model-value="true"
    label="Disabled Active Switcher"
    disabled
  />
  <wt-switcher
    :model-value="false"
    label="Disabled Inactive Switcher"
    disabled
  />
</template>

<style scoped lang="scss"></style>

Example Switcher with Label Left

Label Left Switcher

Code

<script setup>
import { ref } from 'vue';

const value = ref(false);
</script>

<template>
  <wt-switcher
    v-model="value"
    label="Label Left Switcher"
    label-left
  />
</template>

<style scoped lang="scss"></style>