Toggle Switch

CToggleSwitch is used to select a boolean value.

Basic Usage

CToggleSwitch is used with the v-model property for two-way value binding.

<template>
  <CToggleSwitch v-model="checked" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checked = ref(true);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CToggleSwitch 
      v-model="checked" 
      :invalid="!checked" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

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

Template

The handle slot is available to display custom content.

<template>
  <CToggleSwitch v-model="checked">
    <template #handle="{ checked }">
      <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
    </template>
  </CToggleSwitch>
</template>

<script setup lang="ts">
import { ref } from 'vue';

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

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
  <CToggleSwitch 
      v-model="checked" 
      disabled 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

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