<template>
    <label class="custom-label flex">
        <div :class="'bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2' + classes">
            <input type="checkbox" class="hidden" :checked="checkIt" @click="checkThis">
            <div class="hidden check rounded-sm w-4 h-4 bg-gray-700 pointer-events-none"></div>
        </div>
        <span class="select-none ml-1">{{ label }}</span>
    </label>
</template>

<script>
export default {
    name: 'CheckBoxField',
    props: {
        checkIt: {
            type: Boolean,
        },
        classes: String,
        label: String,
        required: {
            type: Boolean,
            default: false
        },
    },
    data: function () {
        return {
            check: this.checkIt,
        }
    },
    methods: {
        checkThis() {
            this.check = !this.check
            this.$emit('update:field', this.check)
        }
    }
}
</script>

<style scoped>
    .custom-label input:checked + .check {
        display: block !important;
    }
</style>
