npx volt-vue add ToggleSwitch
import ToggleSwitch from '@/volt/ToggleSwitch.vue';
ToggleSwitch is used with the v-model property for two-way value binding.
<template>
<div class="card flex justify-center">
<ToggleSwitch v-model="checked" />
</div>
</template>
<script setup lang="ts">
import ToggleSwitch from '@/volt/ToggleSwitch.vue';
import { ref } from 'vue';
const checked = ref(false);
</script>
Enabling checked property displays the component as active initially.
<template>
<div class="card flex justify-center">
<ToggleSwitch v-model="checked" />
</div>
</template>
<script setup lang="ts">
import ToggleSwitch from '@/volt/ToggleSwitch.vue';
import { ref } from 'vue';
const checked = ref(true);
</script>
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>
<div class="card flex justify-center">
<ToggleSwitch v-model="checked" :invalid="!checked" />
</div>
</template>
<script setup lang="ts">
import ToggleSwitch from '@/volt/ToggleSwitch.vue';
import { ref } from 'vue';
const checked = ref(false);
</script>
The handle slot is available to display custom content.
<template>
<div class="card flex justify-center">
<ToggleSwitch v-model="checked">
<template #handle="{ checked }">
<i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
</template>
</ToggleSwitch>
</div>
</template>
<script setup lang="ts">
import ToggleSwitch from '@/volt/ToggleSwitch.vue';
import { ref } from 'vue';
const checked = ref(false);
</script>
When disabled is present, the element cannot be edited and focused.
<template>
<div class="card flex justify-center">
<ToggleSwitch v-model="checked" disabled />
</div>
</template>
<script setup lang="ts">
import ToggleSwitch from '@/volt/ToggleSwitch.vue';
import { ref } from 'vue';
const checked = ref(false);
</script>