traxxx/assets/components/form/checkbox.vue

<template>
	<label class="check-container noselect">
		<span
			v-if="label"
			class="check-label"
		>{{ label }}</span>

		<input
			v-show="false"
			:id="`checkbox-${uid}`"
			:checked="checked"
			type="checkbox"
			class="check-checkbox"
			@change="$emit('change', $event.target.checked)"
		>

		<label
			:for="`checkbox-${uid}`"
			class="check"
		/>
	</label>
</template>

<script>
export default {
	props: {
		checked: {
			type: Boolean,
			default: false,
		},
		label: {
			type: String,
			default: null,
		},
	},
	emits: ['change'],
};
</script>

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

.check-container {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.check {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-shrink: 0;
	position: relative;
	background-color: var(--shadow-hint);
    cursor: pointer;
    transition: background .15s ease;

    &::after {
        content: '';
        width: .5rem;
        height: .3rem;
        border: solid 2px var(--text-light);
        border-top: none;
        border-right: none;
        margin: -.2rem 0 0 0;
        transform: rotateZ(-45deg) scaleX(0);
        transition: transform .15s ease;
    }
}

.check-cross .check::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: url('/img/icons/cross3.svg') no-repeat center/80%;
	opacity: .15;
	transition: transform .1s ease;
}

.check-checkbox:checked + .check {
    background: var(--primary);

    &::after {
        transform: rotateZ(-45deg) scaleX(1);
    }

	&::before {
        transform: scaleX(0);
	}
}

.check-label {
	overflow: hidden;
	text-transform: capitalize;
	text-overflow: ellipsis;
	margin: 0 .5rem 0 0;
}
</style>