add components form folder

resources/js/components/Form/CheckBoxField.vue

@@ -0,0 +1,43 @@
+<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>