From 6348d3965c730cf186bb066be88ca8a522c01ed2 Mon Sep 17 00:00:00 2001
From: Matt Young <matt@mattyoung.us>
Date: Sat, 13 Dec 2025 21:22:21 -0600
Subject: [PATCH] create checkbox component

---
 .../views/components/form/checkbox.blade.php  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 resources/views/components/form/checkbox.blade.php

diff --git a/resources/views/components/form/checkbox.blade.php b/resources/views/components/form/checkbox.blade.php
new file mode 100644
index 0000000..d8fce9c
--- /dev/null
+++ b/resources/views/components/form/checkbox.blade.php
@@ -0,0 +1,25 @@
+@props(['name', 'id', 'label', 'checked' => false, 'description' => ''])
+
+
+<div class="flex gap-3">
+    <div class="flex h-6 shrink-0 items-center">
+        <div class="group grid size-4 grid-cols-1">
+            <input id="{{ $id ?? $name }}" type="checkbox" name="{{ $name }}"
+                   {{ $checked ? 'checked' : '' }}
+                   class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-brand-600 checked:bg-brand-600 indeterminate:border-brand-600 indeterminate:bg-brand-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-white/10 dark:bg-white/5 dark:checked:border-brand-500 dark:checked:bg-brand-500 dark:indeterminate:border-brand-500 dark:indeterminate:bg-brand-500 dark:focus-visible:outline-brand-500 dark:disabled:border-white/5 dark:disabled:bg-white/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"/>
+            <svg viewBox="0 0 14 14" fill="none"
+                 class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25 dark:group-has-disabled:stroke-white/25">
+                <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      class="opacity-0 group-has-checked:opacity-100"/>
+                <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      class="opacity-0 group-has-indeterminate:opacity-100"/>
+            </svg>
+        </div>
+    </div>
+    <div class="text-sm/6">
+        <label for="{{ $id ?? $name }}" class="font-medium text-gray-900 dark:text-white">{{ $label }}</label>
+        @if($description)
+            <p id="{{ $id ?? $name }}-description" class="text-gray-500 dark:text-gray-400">{{ $description }}</p>
+        @endif
+    </div>
+</div>