Switch

Switch component to show a boolean state (similar to a checkbox).

Basic Usage

Switch

switchValue1 : false

<template>
  <div>
    <spr-switch v-model="switchValue1">Switch</spr-switch>
    <p>switchValue1: {{ switchValue1 }}</p>
  </div>
</template>

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

import SprSwitch from '@/components/switch/switch.vue';

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

Text Label

Left

Right

Left

Right

<!-- Default text position -->
<spr-switch v-model="switchValue2">Left</spr-switch>

<!-- Text position using the rightText slot -->
<spr-switch v-model="switchValue3">
  <template #rightText>Right</template>
</spr-switch>

<!-- Text position using both the leftText and rightText slots -->
<spr-switch v-model="switchValue4">
  <template #leftText>Left</template>
  <template #rightText>Right</template>
</spr-switch>

Disabled

Disabled false switch

Disabled true switch

<!-- Declare the disabled property -->
<spr-switch v-model="switchValue5" disabled>
  Disabled false switch
</spr-switch>

<!-- or set a value to the disabled property -->
<spr-switch v-model="switchValue6" :disabled="true">
  Disabled true switch
</spr-switch>

Emit

The switch component uses @vueuse/core's useVModel for properties and emit v-model binding. By default, update:modelValue emit is defined and can be used to listen for any value changes with modelValue property.

Switch

No event yet.

<template>
  <div>
    <spr-switch v-model="switchValue7" @update:modelValue="switch7UpdateHandler">Switch</spr-switch>
    <p>{{ switch7Label }}</p>
  </div>
</template>

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

import SprSwitch from '@/components/switch/switch.vue';

const switchValue7 = ref(true);
const switch7Label = ref('No event yet.');
const switch7UpdateHandler = (value) => {
  switch7Label.value = 'Value changed to ' + value;
};
</script>

API Reference

Props

Name	Description	Type	Default
modelValue	The current value of the switch (on/off state). This prop is required for v-model binding to work correctly. Set to true for on state and false for off state.	boolean	false
disabled	When set to true, the switch cannot be interacted with and appears visually disabled with reduced opacity. The switch will not emit events when disabled.	boolean	false
state	Controls the visual state of the switch. This is primarily used internally but can be explicitly set: default: Normal state hover: Hovered state (also sets autofocus) pressed: When the switch is being clicked/pressed disabled: When the switch is disabled	'default' | 'hover' | 'pressed' | 'disabled'	'default'
id	The HTML id attribute for the switch input element. Used for associating the switch with labels for accessibility. When not provided, a random ID will be generated with format switch_input_[random] or [provided_id]_[random] if an id is provided.	string	''

Events

Name	Description	Parameters
update:modelValue	Emitted when the switch state changes. This event is used for v-model binding and will not be emitted when the switch is disabled. The component uses @vueuse/core's useVModel for two-way binding.	(value: boolean) - The new value of the switch after the state change

Slots

Name	Description
default	Default slot that displays text to the left of the switch. Use this for providing a label when you want it on the left side. If both default and leftText slots are provided, leftText takes precedence.
leftText	Explicitly places text to the left of the switch. This slot takes precedence over the default slot if both are provided. If this slot and the default slot are empty, no left label will be shown.
rightText	Displays text to the right of the switch. Use this slot when you want the label to appear after the switch. If this slot is empty, no right label will be shown.

Product Uses