traxxx/assets/components/form/toggle.vue

<template>
	<label class="toggle-container noselect">
		<input
			:id="`toggle-${id}`"
			:checked="checked"
			:true-value="trueValue"
			:false-value="falseValue"
			:disabled="disabled"
			type="checkbox"
			class="toggle-input"
			@change="$emit('change', $event.target.checked)"
		>

		<label
			:for="`toggle-${id}`"
			class="toggle"
		/>
	</label>
</template>

<script>
export default {
	props: {
		checked: {
			type: Boolean,
			default: false,
		},
		trueValue: {
			type: null,
			default: true,
		},
		falseValue: {
			type: null,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	emits: ['change'],
	data() {
		return {
			id: Math.floor(new Date().getTime() * Math.random()),
		};
	},
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';

.toggle-container {
	display: inline-block;
	cursor: pointer;

	&.light {
		.toggle {
			background: var(--lighten-weak);
		}

		.toggle-input:checked + .toggle {
			background: var(--lighten);
		}
	}
}

.toggle {
	width: 2rem;
	height: .9rem;
	display: flex;
	align-items: center;
	position: relative;
	background: var(--shadow-hint);
	border-radius: 1rem;
	cursor: pointer;

	&::after {
		content: '';
		background-color: var(--background-light);
		width: 1rem;
		height: 1rem;
		display: inline-block;
		position: absolute;
		left: 0;
		border-radius: 50%;
		box-shadow: 0 0 2px var(--darken-strong);
		transition: background-color .2s ease, left .2s ease;
	}
}

.toggle-input {
	display: none;

	&:checked + .toggle {
		background: var(--primary-faded);

		&::after {
			background: var(--primary);
			left: calc(100% - 1rem);
		}
	}

	&[disabled] + .toggle {
		background: var(--shadow-weak);

		&::after {
			background: var(--shadow);
		}
	}
}
</style>