feat(Checkbox/Radio/RadioGroup): add help slot

Resolves #1957

docs/content/2.components/checkbox.md

@@ -87,6 +87,10 @@ slots:
   [Label]{.italic}
 ::
 
+### `help` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Like the `#label` slot, use the `#help` slot to override the content of the help text.
+
 ## Props
 
 :component-props

docs/content/2.components/radio-group.md

@@ -126,6 +126,10 @@ slots:
   [Label]{.italic}
 ::
 
+### `help` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Like the `#label` slot, use the `#help` slot to override the content of the help text.
+
 ### `legend`
 
 Use the `#legend` slot to override the content of the legend.

src/runtime/components/forms/Checkbox.vue

@@ -17,11 +17,13 @@
     </div>
     <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
-        <slot name="label">{{ label }}</slot>
+        <slot name="label" :label="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
-      <p v-if="help" :class="ui.help">
+      <p v-if="help || $slots.help" :class="ui.help">
-        {{ help }}
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
       </p>
     </div>
   </div>

src/runtime/components/forms/Radio.vue

@@ -16,11 +16,13 @@
     </div>
     <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
-        <slot name="label">{{ label }}</slot>
+        <slot name="label" :label="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
-      <p v-if="help" :class="ui.help">
+      <p v-if="help || $slots.help" :class="ui.help">
-        {{ help }}
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
       </p>
     </div>
   </div>

src/runtime/components/forms/RadioGroup.vue

@@ -20,6 +20,10 @@
         <template #label>
           <slot name="label" v-bind="{ option, selected: option.selected }" />
         </template>
+
+        <template #help>
+          <slot name="help" v-bind="{ option, selected: option.selected }" />
+        </template>
       </URadio>
     </fieldset>
   </div>