Form blade and single checkbox label and desc

Author: msc18-cornell

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

@@ -2,11 +2,14 @@
     'label',   // group label OR single checkbox label
     'name' => $attributes->whereStartsWith('wire:model')->first(),
     'options' => null,  // if array → group mode; if null → single mode
+    'value' => null,
+    'text' => null,
     'badge' => null,
 ])
 
 @php
 $badge ??= $attributes->whereStartsWith('required')->isNotEmpty() ? 'Required' : null;
+$text ??= $value;
 @endphp
 
 {{-- Group Mode (options array is passed) --}}
@@ -22,11 +25,10 @@
 
 {{-- Single Checkbox Mode --}}
 @else
-    <flux:field variant="inline">
-        <flux:checkbox :$attributes />
-
-        <flux:label :$badge>{{ $label }}</flux:label>
-
-        <flux:error :$name />
-    </flux:field>
+    <flux:checkbox.group :$label :$badge :$attributes >
+        <flux:checkbox
+            :value="$value"
+            :label="$text"
+        />
+    </flux:checkbox.group>
 @endif

resources/views/examples/form.blade.php

@@ -13,7 +13,7 @@
                 </div>
             </div>
         </div>
-        <div class="region padded-small tint">
+        <div class="region padded tint">
             <div class="container container-full">
                 <div class="section">
                     <h2>Basic Text</h2>
@@ -101,7 +101,9 @@ class="native-size"
                     <form>
                         <x-cds.checkbox
                             name="terms"
-                            label="I agree to the terms and conditions"
+                            label="Terms and Conditions"
+                            description="Please review our terms and conditions before proceeding."
+                            value="I agree to the terms and conditions"
                             required
                             error:message="This field has an error."
 
@@ -139,6 +141,8 @@ class="native-size"
                             error:message="This field has an error."
 
                         />
+                        <flux:separator class="mb-4" />
+
                         <x-cds.button type="submit">Submit</x-cds.button>
                         <x-cds.button type="reset">Reset</x-cds.button>
                     </form>