chore(multiselect): move helper text below input

src/MultiSelect/MultiSelect.stories.js

@@ -20,6 +20,7 @@ export const Default = () => ({
     id: text("MultiSelect id", "multi-select-id"),
     name: text("MultiSelect name", "multi-select-name"),
     titleText: text("Title (titleText)", "Multiselect Title"),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     filterable: boolean("Filterable (filterable)", false),
     selectionFeedback: select(
       "Selection feedback (selectionFeedback)",

src/MultiSelect/MultiSelect.svelte

@@ -268,13 +268,6 @@
       {titleText}
     </label>
   {/if}
-  {#if !inline && helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
-      {helperText}
-    </div>
-  {/if}
   <ListBox
     aria-label="{ariaLabel}"
     id="{id}"
@@ -447,4 +440,11 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
+  {#if !inline && !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
 </div>