# hostinger/3.0.78/vue-frontend/src/components/Toggle.vue

Hostinger Tools, version 3.0.78. 229 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/Toggle.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.78/raw/vue-frontend/src/components/Toggle.vue
- Modified: 2025-09-09T07:18:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/Toggle.vue#L10-L20`.

```vue
<script setup lang="ts">
import { computed, ref, watch } from "vue";

interface Props {
	modelValue: boolean;
	bind?: boolean;
	isDisabled?: boolean;
}

type Emits = {
	"update:modelValue": [value: boolean];
	click: [];
};

const props = withDefaults(defineProps<Props>(), {
	bind: true
});

const emit = defineEmits<Emits>();

const inputValue = ref(props.modelValue);

const displayValue = computed(() =>
	props.bind ? inputValue.value : props.modelValue
);

const onChange = (event: Event) => {
	inputValue.value = (event.target as HTMLInputElement).checked;
	emit("update:modelValue", inputValue.value);
};

const onClick = () => {
	if (!props.bind && !props.isDisabled) {
		emit("click");
	}
};

watch(
	() => props.modelValue,
	(value) => {
		inputValue.value = value;
	}
);
</script>

<template>
  <div class="toggle__element-container">
    <label
      class="toggle h-mb-0"
      :class="{ active: displayValue, 'toggle--disabled': isDisabled }"
      @click="onClick"
    >
      <input
        type="checkbox"
        :checked="displayValue"
        :disabled="!bind || isDisabled"
        @change="onChange"
      >
      <span />
    </label>
  </div>
</template>

<style lang="scss" scoped>
$toggle-width: 40px;
$toggle-height: 22px;
$toggle-border-radius: 1.25em;
$toggle-border-size: 1px;

.toggle {
	width: $toggle-width;
	height: $toggle-height;
	background: var(--gray-border);
	border: 1px solid var(--gray-border);
	border-radius: $toggle-border-radius;
	position: relative;
	overflow: hidden;
	transition: all 0.5s;
	cursor: pointer;
	display: flex;
	align-items: center;

	color: var(--grayscale-000-gray-000-38);

	&.active {
		background: var(--primary);
	}

	&.toggle > span {
		width: 20px;
		height: 20px;
		transform: translate(0%, 0);
		border: 0;
		box-shadow: var(--shadow);
		opacity: 1;
	}

	input {
		margin-left: -999px;
		height: 0;
		width: 0;
		overflow: hidden;
		position: absolute;
		opacity: 0;
	}

	input:empty ~ span &--on {
		display: none;
	}

	input:empty ~ span &--off {
		display: inline;
	}

	input:checked ~ span {
		opacity: 1;
		background: var(--light);
		transform: translate(100%, 0);
	}

	input:checked ~ span > &--on {
		display: inline;
	}

	input:checked ~ span &--off {
		display: none;
	}

	> span {
		width: $toggle-height;
		height: $toggle-height;
		opacity: 0.4;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--gray-light);
		border-radius: 50%;
		transform: translate(0, 0);
		margin: -1px;
		transition: all 0.15s;
		overflow: hidden;

		background: var(--light);
	}

	&--disabled {
		opacity: 0.38;
		pointer-events: none;
	}

	&--disabled,
	&--unavailable {
		color: var(--gray-border);
	}
}

.toggle--primary {
	color: var(--primary);
}

.toggle--secondary {
	color: var(--secondary);
}

.toggle--success {
	color: var(--success);
}

.toggle--info {
	color: var(--primary-hostinger);
}

.toggle--warning {
	color: var(--warning);
}

.toggle--warning-regular {
	color: var(--warning-regular);
}

.toggle--danger {
	color: var(--danger);
}

.toggle--light {
	color: var(--light);
}

.toggle--dark {
	color: var(--dark);
}

.toggle--black {
	color: var(--dark);
}

.toggle--gray {
	color: var(--gray);
}

.toggle--gray-light {
	color: var(--gray-light);
}

.toggle--header-bg {
	color: var(--header-bg);
}

.toggle--danger-light {
	color: var(--danger-light);
}

.toggle--success-dark {
	color: var(--success-dark);
}

.toggle--success-light {
	color: var(--success-light);
}

.toggle--warning-light {
	color: var(--warning-light);
}

.toggle--warning-dark {
	color: var(--warning-dark);
}
</style>

```