refactor: improve checkbox component accessibility and styling

resources/views/components/forms/checkbox.blade.php

@@ -11,21 +11,22 @@
 ])
 
 <div @class([
-    'flex flex-row items-center gap-4 pr-2 py-1 form-control min-w-fit dark:hover:bg-coolgray-100',
+    'flex flex-row items-center gap-4 pr-2 py-1 form-control min-w-fit',
     'w-full' => $fullWidth,
+    'dark:hover:bg-coolgray-100 cursor-pointer' => !$disabled,
 ])>
-    <label @class([
-        'flex gap-4 items-center px-0 min-w-fit label w-full cursor-pointer',
-    ])>
+    <label @class(['flex gap-4 items-center px-0 min-w-fit label w-full'])>
         <span class="flex flex-grow gap-2">
             @if ($label)
-                {!! $label !!}
+                @if ($disabled)
+                    <span class="opacity-60">{!! $label !!}</span>
                 @else
-                {{ $id }}
+                    {!! $label !!}
                 @endif
                 @if ($helper)
                     <x-helper :helper="$helper" />
                 @endif
+            @endif
         </span>
         @if ($instantSave)
             <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}