refactor(checkbox): Use Label class for suffix and prefix

Author: sfxcode

dev/pages/index.vue

@@ -57,7 +57,6 @@ const schema = reactive(
       name: 'eu_citizen',
       id: 'eu',
       prefix: 'Are you a european citizen?',
-      outerClass: 'col-6',
     },
     {
       $formkit: 'primeSelect',
@@ -68,7 +67,6 @@ const schema = reactive(
       optionValue: 'value',
       options,
       help: 'How often should we display a cookie notice?',
-      outerClass: 'col-6',
     },
   ],
 )

src/components/PrimeCheckbox.vue

@@ -23,20 +23,22 @@ const props = defineProps({
   },
 })
 
-const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
+const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
 const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+
+const generatedId = generateId()
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="hasPrefix" class="formkit-prefix">
+    <label v-if="hasPrefix" :for="generatedId" class="formkit-prefix">
       {{ context?.prefix }}
-    </span>
+    </label>
     <Checkbox
       v-model="context._value"
       v-bind="context?.attrs"
-      :input-id="context.id"
+      :input-id="generatedId"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
@@ -55,8 +57,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="hasSuffix" class="formkit-suffix">
+    <label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
       {{ context?.suffix }}
-    </span>
+    </label>
   </div>
 </template>