bravio init project

components/InputCheckbox.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex items-center mb-4 bg-white outline-1 -outline-offset-1 outline-gray-300 p-2 rounded-md">
+    <input 
+      id="default-checkbox" 
+      v-model="checkbox"
+      type="checkbox" 
+      class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+    <label 
+    for="default-checkbox" 
+    class="ms-2 text-sm text-gray-900 dark:text-gray-300"
+    >{{ label }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: { type: String, required: true },
+  },
+  emits: ['input-value'],
+  data() {
+    return {
+      checkbox: ''
+    }
+  },
+  watch: {
+    checkbox(newVal) {
+      this.updateCheckbox(newVal);
+    }
+  },
+  methods: {
+    updateCheckbox(value) {
+      if (value === true) {
+        this.$emit('input-value', this.label);
+      }
+      if (value === false) {
+        this.$emit('input-value', null);
+      }
+    }
+  }
+}
+</script>