Add attribute required to checkbox

blumilksoftware · Aug 20, 2024 · 004e4a9 · 004e4a9
1 parent 0a07083
commit 004e4a9
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/resources/js/components/Common/Checkbox.vue b/resources/js/components/Common/Checkbox.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="inline-flex items-center">
-    <label class="relative flex items-center rounded-full cursor-pointer" htmlFor="checkbox">
-      <input 
+    <label class="relative flex items-center rounded-full cursor-pointer">
+      <input
         id="checkbox"
+        required
         type="checkbox"
-        class="before:content[''] peer relative size-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:size-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-primary checked:bg-primary checked:before:bg-primary hover:before:opacity-10" checked
+        class="before:content[''] peer relative size-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:size-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-primary checked:bg-primary checked:before:bg-primary hover:before:opacity-10"
       >
       <span
         class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100"