From eb493c357ce59dc0c6766af924b5b59503fb021b Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Thu, 20 Mar 2025 20:03:14 +0530
Subject: [PATCH] Enhance CheckboxInput and ToggleSwitchInput Components with
 Help Slot Positioning (#728)

- Introduce conditional rendering for help text in CheckboxInput.vue and ToggleSwitchInput.vue, allowing help text to be displayed either above or below the input based on the helpPosition prop.
- Update the structure of the help slot to improve flexibility and user experience.

These changes enhance the usability of the form components by providing clearer guidance to users.
---
 client/components/forms/CheckboxInput.vue     | 18 +++++++++++++++++-
 client/components/forms/ToggleSwitchInput.vue | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
index 9bbd60a4..37ddc615 100644
--- a/client/components/forms/CheckboxInput.vue
+++ b/client/components/forms/CheckboxInput.vue
@@ -15,6 +15,19 @@
         :theme="theme"
       />
       <div>
+        <slot
+          v-if="helpPosition === 'above_input'"
+          name="help"
+        >
+          <InputHelp
+            :help="help"
+            :help-classes="theme.default.help"
+          >
+            <template #after-help>
+              <slot name="bottom_after_help" />
+            </template>
+          </InputHelp>
+        </slot>
         <slot name="label">
           <label
             :aria-label="id ? id : name"
@@ -28,7 +41,10 @@
             >*</span>
           </label>
         </slot>
-        <slot name="help">
+        <slot
+          v-if="helpPosition === 'below_input'"
+          name="help"
+        >
           <InputHelp
             :help="help"
             :help-classes="theme.default.help"
diff --git a/client/components/forms/ToggleSwitchInput.vue b/client/components/forms/ToggleSwitchInput.vue
index 3dd52d8c..aa2cc4c3 100644
--- a/client/components/forms/ToggleSwitchInput.vue
+++ b/client/components/forms/ToggleSwitchInput.vue
@@ -16,6 +16,19 @@
       />
   
       <div>
+        <slot
+          v-if="helpPosition === 'above_input'"
+          name="help"
+        >
+          <InputHelp
+            :help="help"
+            :help-classes="theme.default.help"
+          >
+            <template #after-help>
+              <slot name="bottom_after_help" />
+            </template>
+          </InputHelp>
+        </slot>
         <slot name="label">
           <label
             :aria-label="id ? id : name"
@@ -29,7 +42,10 @@
             >*</span>
           </label>
         </slot>
-        <slot name="help">
+        <slot
+          v-if="helpPosition === 'below_input'"
+          name="help"
+        >
           <InputHelp
             :help="help"
             :help-classes="theme.default.help"