From 7e037099b4c88607de0830d161c572519d208410 Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:05:58 +0000
Subject: [PATCH] Field help text (#12383)

* wip

* client finished

* add to bbui input

* linting

* PR Feedback

* remove test code

* linting

* PR feedback

---------

Co-authored-by: Martin McKeaveney <martin@budibase.com>
---
 packages/bbui/src/Form/Checkbox.svelte        |  3 +-
 packages/bbui/src/Form/Combobox.svelte        |  3 +-
 packages/bbui/src/Form/Core/Checkbox.svelte   |  2 -
 .../bbui/src/Form/Core/CheckboxGroup.svelte   |  2 -
 packages/bbui/src/Form/Core/Combobox.svelte   |  3 -
 packages/bbui/src/Form/Core/DatePicker.svelte | 13 ----
 packages/bbui/src/Form/Core/Dropzone.svelte   |  5 --
 .../bbui/src/Form/Core/InputDropdown.svelte   | 18 +----
 .../bbui/src/Form/Core/Multiselect.svelte     |  2 -
 packages/bbui/src/Form/Core/Picker.svelte     | 12 ----
 .../bbui/src/Form/Core/PickerDropdown.svelte  |  8 +--
 packages/bbui/src/Form/Core/RadioGroup.svelte |  2 -
 .../bbui/src/Form/Core/RichTextField.svelte   | 17 +----
 packages/bbui/src/Form/Core/Select.svelte     |  2 -
 packages/bbui/src/Form/Core/Stepper.svelte    | 12 ----
 packages/bbui/src/Form/Core/TextArea.svelte   | 12 ----
 packages/bbui/src/Form/Core/TextField.svelte  | 11 ----
 packages/bbui/src/Form/DatePicker.svelte      |  3 +-
 packages/bbui/src/Form/Dropzone.svelte        |  3 +-
 packages/bbui/src/Form/EnvDropdown.svelte     |  3 +-
 packages/bbui/src/Form/Field.svelte           | 23 +++++++
 packages/bbui/src/Form/File.svelte            |  3 +-
 packages/bbui/src/Form/Input.svelte           |  3 +-
 packages/bbui/src/Form/InputDropdown.svelte   |  3 +-
 packages/bbui/src/Form/Multiselect.svelte     |  3 +-
 packages/bbui/src/Form/PickerDropdown.svelte  |  3 +-
 packages/bbui/src/Form/RadioGroup.svelte      |  3 +-
 packages/bbui/src/Form/RichTextField.svelte   |  3 +-
 packages/bbui/src/Form/Search.svelte          |  3 +-
 packages/bbui/src/Form/Select.svelte          |  3 +-
 packages/bbui/src/Form/Slider.svelte          |  3 +-
 packages/bbui/src/Form/Stepper.svelte         |  3 +-
 packages/bbui/src/Form/TextArea.svelte        |  3 +-
 packages/bbui/src/Form/Toggle.svelte          |  3 +-
 packages/client/manifest.json                 | 65 +++++++++++++++++++
 .../app/forms/AttachmentField.svelte          |  2 +
 .../components/app/forms/BooleanField.svelte  |  2 +
 .../app/forms/CodeScannerField.svelte         |  2 +
 .../components/app/forms/DateTimeField.svelte |  2 +
 .../src/components/app/forms/Field.svelte     | 43 +++++++++++-
 .../src/components/app/forms/JSONField.svelte |  2 +
 .../components/app/forms/LongFormField.svelte |  2 +
 .../app/forms/MultiFieldSelect.svelte         |  2 +
 .../components/app/forms/OptionsField.svelte  |  2 +
 .../app/forms/RelationshipField.svelte        |  2 +
 .../components/app/forms/StringField.svelte   |  3 +-
 46 files changed, 189 insertions(+), 138 deletions(-)

diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte
index 6aa88f6dee..6e6cf0d8e8 100644
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@@ -10,6 +10,7 @@
   export let disabled = false
   export let error = null
   export let size = "M"
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -18,6 +19,6 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
 </Field>
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 343af559cb..44854d949e 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -11,6 +11,7 @@
   export let error = null
   export let placeholder = "Choose an option or type"
   export let options = []
+  export let helpText = null
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
 
@@ -27,7 +28,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Combobox
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index e24f5669eb..21fe00e864 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -4,7 +4,6 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = false
-  export let error = null
   export let id = null
   export let text = null
   export let disabled = false
@@ -22,7 +21,6 @@
 
 <label
   class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
-  class:is-invalid={!!error}
   class:checked={value}
   class:is-indeterminate={indeterminate}
   class:readonly
diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
index 66ac55561b..d1a107fcc5 100644
--- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte
+++ b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
@@ -6,7 +6,6 @@
   export let direction = "vertical"
   export let value = []
   export let options = []
-  export let error = null
   export let disabled = false
   export let readonly = false
   export let getOptionLabel = option => option
@@ -34,7 +33,6 @@
       <div
         title={getOptionLabel(option)}
         class="spectrum-Checkbox spectrum-FieldGroup-item"
-        class:is-invalid={!!error}
         class:readonly
       >
         <label
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index b1b264a9b7..572d82ecf8 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -10,7 +10,6 @@
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -39,12 +38,10 @@
 <div
   class="spectrum-InputGroup"
   class:is-focused={open || focus}
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
 >
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
     class:is-disabled={disabled}
     class:is-focused={open || focus}
   >
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 786aee40b6..607899683a 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -10,7 +10,6 @@
   export let id = null
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let enableTime = true
   export let value = null
   export let placeholder = null
@@ -188,7 +187,6 @@
     <div
       id={flatpickrId}
       class:is-disabled={disabled || readonly}
-      class:is-invalid={!!error}
       class="flatpickr spectrum-InputGroup spectrum-Datepicker"
       class:is-focused={open}
       aria-readonly="false"
@@ -199,17 +197,7 @@
         on:click={flatpickr?.open}
         class="spectrum-Textfield spectrum-InputGroup-textfield"
         class:is-disabled={disabled}
-        class:is-invalid={!!error}
       >
-        {#if !!error}
-          <svg
-            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-icon-18-Alert" />
-          </svg>
-        {/if}
         <input
           {disabled}
           {readonly}
@@ -227,7 +215,6 @@
         class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
         tabindex="-1"
         class:is-disabled={disabled}
-        class:is-invalid={!!error}
         on:click={flatpickr?.open}
       >
         <svg
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index bfa0285250..dc89476db2 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -22,7 +22,6 @@
   export let handleFileTooLarge = null
   export let handleTooManyFiles = null
   export let gallery = true
-  export let error = null
   export let fileTags = []
   export let maximum = null
   export let extensions = "*"
@@ -222,7 +221,6 @@
   {#if showDropzone}
     <div
       class="spectrum-Dropzone"
-      class:is-invalid={!!error}
       class:disabled
       role="region"
       tabindex="0"
@@ -351,9 +349,6 @@
   .spectrum-Dropzone {
     user-select: none;
   }
-  .spectrum-Dropzone.is-invalid {
-    border-color: var(--spectrum-global-color-red-400);
-  }
   input[type="file"] {
     display: none;
   }
diff --git a/packages/bbui/src/Form/Core/InputDropdown.svelte b/packages/bbui/src/Form/Core/InputDropdown.svelte
index 944d79655d..153501ce5a 100644
--- a/packages/bbui/src/Form/Core/InputDropdown.svelte
+++ b/packages/bbui/src/Form/Core/InputDropdown.svelte
@@ -14,7 +14,6 @@
   export let disabled = false
   export let readonly = false
   export let updateOnChange = true
-  export let error = null
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
@@ -111,27 +110,12 @@
   }
 </script>
 
-<div
-  class="spectrum-InputGroup"
-  class:is-invalid={!!error}
-  class:is-disabled={disabled}
->
+<div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
     class:is-disabled={disabled}
     class:is-focused={focus}
   >
-    {#if error}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
-
     <input
       {id}
       on:click
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 8d72dd0652..d5d6515d2d 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -6,7 +6,6 @@
   export let id = null
   export let placeholder = null
   export let disabled = false
-  export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -84,7 +83,6 @@
 <Picker
   on:loadMore
   {id}
-  {error}
   {disabled}
   {readonly}
   {fieldText}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index aa06d5f748..6361b345d1 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -14,7 +14,6 @@
 
   export let id = null
   export let disabled = false
-  export let error = null
   export let fieldText = ""
   export let fieldIcon = ""
   export let fieldColour = ""
@@ -113,7 +112,6 @@
   class="spectrum-Picker spectrum-Picker--sizeM"
   class:spectrum-Picker--quiet={quiet}
   {disabled}
-  class:is-invalid={!!error}
   class:is-open={open}
   aria-haspopup="listbox"
   on:click={onClick}
@@ -142,16 +140,6 @@
   >
     {fieldText}
   </span>
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-      aria-label="Folder"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
   <svg
     class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
     focusable="false"
diff --git a/packages/bbui/src/Form/Core/PickerDropdown.svelte b/packages/bbui/src/Form/Core/PickerDropdown.svelte
index b0a884738f..e22a30a1d3 100644
--- a/packages/bbui/src/Form/Core/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte
@@ -16,7 +16,6 @@
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
-  export let error = null
   export let secondaryOptions = []
   export let primaryOptions = []
   export let secondaryFieldText = ""
@@ -105,14 +104,9 @@
   }
 </script>
 
-<div
-  class="spectrum-InputGroup"
-  class:is-invalid={!!error}
-  class:is-disabled={disabled}
->
+<div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
     class:is-disabled={disabled}
     class:is-focused={focus}
     class:is-full-width={!secondaryOptions.length}
diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
index 648c46b5fc..04007b58b1 100644
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -6,7 +6,6 @@
   export let direction = "vertical"
   export let value = null
   export let options = []
-  export let error = null
   export let disabled = false
   export let readonly = false
   export let getOptionLabel = option => option
@@ -40,7 +39,6 @@
       <div
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
-        class:is-invalid={!!error}
         class:readonly
       >
         <input
diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index 3e0b0caf4d..08032059e7 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -5,14 +5,13 @@
   export let placeholder = null
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let height = null
   export let id = null
   export let fullScreenOffset = null
   export let easyMDEOptions = null
 </script>
 
-<div class:error>
+<div>
   <MarkdownEditor
     {value}
     {placeholder}
@@ -27,18 +26,4 @@
 </div>
 
 <style>
-  .error :global(.EasyMDEContainer .editor-toolbar) {
-    border-top-color: var(--spectrum-semantic-negative-color-default);
-    border-left-color: var(--spectrum-semantic-negative-color-default);
-    border-right-color: var(--spectrum-semantic-negative-color-default);
-  }
-  .error :global(.EasyMDEContainer .CodeMirror) {
-    border-bottom-color: var(--spectrum-semantic-negative-color-default);
-    border-left-color: var(--spectrum-semantic-negative-color-default);
-    border-right-color: var(--spectrum-semantic-negative-color-default);
-  }
-  .error :global(.EasyMDEContainer .editor-preview-side) {
-    border-bottom-color: var(--spectrum-semantic-negative-color-default);
-    border-right-color: var(--spectrum-semantic-negative-color-default);
-  }
 </style>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index a85d4094c5..e928ae689d 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -6,7 +6,6 @@
   export let id = null
   export let placeholder = "Choose an option"
   export let disabled = false
-  export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -71,7 +70,6 @@
   on:loadMore
   {quiet}
   {id}
-  {error}
   {disabled}
   {readonly}
   {fieldText}
diff --git a/packages/bbui/src/Form/Core/Stepper.svelte b/packages/bbui/src/Form/Core/Stepper.svelte
index 895dc2d3de..816add249f 100644
--- a/packages/bbui/src/Form/Core/Stepper.svelte
+++ b/packages/bbui/src/Form/Core/Stepper.svelte
@@ -7,7 +7,6 @@
   export let value = null
   export let placeholder = null
   export let disabled = false
-  export let error = null
   export let id = null
   export let readonly = false
   export let updateOnChange = true
@@ -98,20 +97,9 @@
 <div
   class="spectrum-Stepper"
   class:spectrum-Stepper--quiet={quiet}
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
 >
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
-
   <div class="spectrum-Textfield spectrum-Stepper-textfield">
     <input
       {disabled}
diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index be7eed466d..9b49f54f58 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -6,7 +6,6 @@
   export let placeholder = null
   export let disabled = false
   export let readonly = false
-  export let error = null
   export let id = null
   export let height = null
   export let minHeight = null
@@ -41,20 +40,9 @@
 <div
   style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
 >
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM
-      spectrum-Textfield-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
   <!-- prettier-ignore -->
   <textarea
     bind:this={textarea}
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 7afd8f86c3..b10997c904 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -6,7 +6,6 @@
   export let placeholder = null
   export let type = "text"
   export let disabled = false
-  export let error = null
   export let id = null
   export let readonly = false
   export let updateOnChange = true
@@ -78,19 +77,9 @@
 <div
   class="spectrum-Textfield"
   class:spectrum-Textfield--quiet={quiet}
-  class:is-invalid={!!error}
   class:is-disabled={disabled}
   class:is-focused={focus}
 >
-  {#if error}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-icon-18-Alert" />
-    </svg>
-  {/if}
   <input
     bind:this={field}
     {disabled}
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index f17871a576..fe861f59ec 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -16,6 +16,7 @@
   export let appendTo = undefined
   export let ignoreTimezones = false
   export let range = false
+  export let helpText = null
   const dispatch = createEventDispatcher()
 
   const onChange = e => {
@@ -30,7 +31,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <DatePicker
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index 2a6fa1c57b..5a624e523c 100644
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -17,6 +17,7 @@
   export let fileTags = []
   export let maximum = undefined
   export let compact = false
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,7 +26,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <CoreDropzone
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/EnvDropdown.svelte b/packages/bbui/src/Form/EnvDropdown.svelte
index b5db23a870..4045d9e6df 100644
--- a/packages/bbui/src/Form/EnvDropdown.svelte
+++ b/packages/bbui/src/Form/EnvDropdown.svelte
@@ -16,6 +16,7 @@
   export let autofocus
   export let variables
   export let showModal
+  export let helpText = null
   export let environmentVariablesEnabled
   export let handleUpgradePanel
   const dispatch = createEventDispatcher()
@@ -25,7 +26,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <EnvDropdown
     {updateOnChange}
     {error}
diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
index 5033c28f7d..0c031b0235 100644
--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@@ -1,11 +1,13 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import FieldLabel from "./FieldLabel.svelte"
+  import Icon from "../Icon/Icon.svelte"
 
   export let id = null
   export let label = null
   export let labelPosition = "above"
   export let error = null
+  export let helpText = null
   export let tooltip = ""
 </script>
 
@@ -17,6 +19,10 @@
     <slot />
     {#if error}
       <div class="error">{error}</div>
+    {:else if helpText}
+      <div class="helpText">
+        <Icon name="HelpOutline" /> <span>{helpText}</span>
+      </div>
     {/if}
   </div>
 </div>
@@ -39,4 +45,21 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
+
+  .helpText {
+    display: flex;
+    margin-top: var(--spectrum-global-dimension-size-75);
+    align-items: center;
+  }
+
+  .helpText :global(svg) {
+    width: 14px;
+    color: var(--grey-5);
+    margin-right: 6px;
+  }
+
+  .helpText span {
+    color: var(--grey-7);
+    font-size: var(--spectrum-global-dimension-font-size-75);
+  }
 </style>
diff --git a/packages/bbui/src/Form/File.svelte b/packages/bbui/src/Form/File.svelte
index 03cacea814..4c00cafc35 100644
--- a/packages/bbui/src/Form/File.svelte
+++ b/packages/bbui/src/Form/File.svelte
@@ -14,6 +14,7 @@
   export let title = null
   export let value = null
   export let tooltip = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -22,7 +23,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error} {tooltip}>
+<Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <CoreFile
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index d3cb13e731..47962720af 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -15,6 +15,7 @@
   export let quiet = false
   export let autofocus
   export let autocomplete
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -23,7 +24,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <TextField
     {updateOnChange}
     {error}
diff --git a/packages/bbui/src/Form/InputDropdown.svelte b/packages/bbui/src/Form/InputDropdown.svelte
index 12db30a43a..93766495b8 100644
--- a/packages/bbui/src/Form/InputDropdown.svelte
+++ b/packages/bbui/src/Form/InputDropdown.svelte
@@ -15,6 +15,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus
+  export let helpText = null
   export let options = []
 
   const dispatch = createEventDispatcher()
@@ -29,7 +30,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <InputDropdown
     {updateOnChange}
     {error}
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 3ae56693c7..b0246c8530 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -18,6 +18,7 @@
   export let autocomplete = false
   export let searchTerm = null
   export let customPopoverHeight
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -26,7 +27,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/PickerDropdown.svelte b/packages/bbui/src/Form/PickerDropdown.svelte
index 156ec9bc7e..bf490ff2d7 100644
--- a/packages/bbui/src/Form/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/PickerDropdown.svelte
@@ -26,6 +26,7 @@
   export let secondaryOptions = []
   export let searchTerm
   export let showClearIcon = true
+  export let helpText = null
 
   let primaryLabel
   let secondaryLabel
@@ -93,7 +94,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <PickerDropdown
     {searchTerm}
     {autocomplete}
diff --git a/packages/bbui/src/Form/RadioGroup.svelte b/packages/bbui/src/Form/RadioGroup.svelte
index 843a3657b4..f261973e1f 100644
--- a/packages/bbui/src/Form/RadioGroup.svelte
+++ b/packages/bbui/src/Form/RadioGroup.svelte
@@ -13,6 +13,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionTitle = option => extractProperty(option, "label")
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -27,7 +28,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <RadioGroup
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
index 275242df49..527710e010 100644
--- a/packages/bbui/src/Form/RichTextField.svelte
+++ b/packages/bbui/src/Form/RichTextField.svelte
@@ -13,6 +13,7 @@
   export let id = null
   export let fullScreenOffset = null
   export let easyMDEOptions = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -21,7 +22,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <RichTextField
     {error}
     {disabled}
diff --git a/packages/bbui/src/Form/Search.svelte b/packages/bbui/src/Form/Search.svelte
index 74ffeeb22a..2fbda275eb 100644
--- a/packages/bbui/src/Form/Search.svelte
+++ b/packages/bbui/src/Form/Search.svelte
@@ -11,6 +11,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let inputRef
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -19,7 +20,7 @@
   }
 </script>
 
-<Field {label} {labelPosition}>
+<Field {helpText} {label} {labelPosition}>
   <Search
     {updateOnChange}
     {disabled}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index a9214320f9..f9d9532ba5 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -26,6 +26,7 @@
   export let align
   export let footer = null
   export let tag = null
+  export let helpText = null
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -40,7 +41,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error} {tooltip}>
+<Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
     {error}
diff --git a/packages/bbui/src/Form/Slider.svelte b/packages/bbui/src/Form/Slider.svelte
index 34b2251b35..192f4bc9b1 100644
--- a/packages/bbui/src/Form/Slider.svelte
+++ b/packages/bbui/src/Form/Slider.svelte
@@ -11,6 +11,7 @@
   export let step = 1
   export let disabled = false
   export let error = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -19,6 +20,6 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Slider {disabled} {value} {min} {max} {step} on:change={onChange} />
 </Field>
diff --git a/packages/bbui/src/Form/Stepper.svelte b/packages/bbui/src/Form/Stepper.svelte
index 9eff2e368e..509aa2178a 100644
--- a/packages/bbui/src/Form/Stepper.svelte
+++ b/packages/bbui/src/Form/Stepper.svelte
@@ -15,6 +15,7 @@
   export let min = null
   export let max = null
   export let step = 1
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -23,7 +24,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Stepper
     {updateOnChange}
     {error}
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index c9451a40cd..15e91d72c1 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -12,6 +12,7 @@
   export let getCaretPosition = null
   export let height = null
   export let minHeight = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -20,7 +21,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <TextArea
     bind:getCaretPosition
     {error}
diff --git a/packages/bbui/src/Form/Toggle.svelte b/packages/bbui/src/Form/Toggle.svelte
index 8cc6506651..d452aa8f80 100644
--- a/packages/bbui/src/Form/Toggle.svelte
+++ b/packages/bbui/src/Form/Toggle.svelte
@@ -9,6 +9,7 @@
   export let text = null
   export let disabled = false
   export let error = null
+  export let helpText = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -17,6 +18,6 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error}>
   <Switch {error} {disabled} {text} {value} on:change={onChange} />
 </Field>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 5979d177f4..202dc8bd2f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2731,6 +2731,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -2862,6 +2867,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -2959,6 +2969,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -3175,6 +3190,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "boolean",
         "label": "Autocomplete",
@@ -3335,6 +3355,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -3559,6 +3584,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -3657,6 +3687,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -3799,6 +3834,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -3894,6 +3934,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -4144,6 +4189,11 @@
         "label": "Label",
         "key": "label"
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "text",
         "label": "Extensions",
@@ -4247,6 +4297,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -4355,6 +4410,11 @@
         "key": "defaultValue",
         "supportsConditions": false
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
@@ -6395,6 +6455,11 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
       {
         "type": "event",
         "label": "On change",
diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index cc0f7aaac6..b61f88daeb 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -13,6 +13,7 @@
   export let onChange
   export let maximum = undefined
   export let span
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -76,6 +77,7 @@
   {readonly}
   {validation}
   {span}
+  {helpText}
   type="attachment"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/BooleanField.svelte b/packages/client/src/components/app/forms/BooleanField.svelte
index 1f59ddcfa6..28cef56aec 100644
--- a/packages/client/src/components/app/forms/BooleanField.svelte
+++ b/packages/client/src/components/app/forms/BooleanField.svelte
@@ -11,6 +11,7 @@
   export let validation
   export let defaultValue
   export let onChange
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -42,6 +43,7 @@
   {disabled}
   {readonly}
   {validation}
+  {helpText}
   defaultValue={isTruthy(defaultValue)}
   type="boolean"
   bind:fieldState
diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte
index 8e5237a27c..be590106c2 100644
--- a/packages/client/src/components/app/forms/CodeScannerField.svelte
+++ b/packages/client/src/components/app/forms/CodeScannerField.svelte
@@ -16,6 +16,7 @@
   export let beepFrequency
   export let customFrequency
   export let preferredCamera
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -38,6 +39,7 @@
   {validation}
   {defaultValue}
   {type}
+  {helpText}
   bind:fieldState
   bind:fieldApi
 >
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 7e2598be81..8ab8e65a15 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -15,6 +15,7 @@
   export let defaultValue
   export let onChange
   export let span
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -35,6 +36,7 @@
   {validation}
   {defaultValue}
   {span}
+  {helpText}
   type="datetime"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 8878b25989..22420b7430 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -1,6 +1,7 @@
 <script>
   import Placeholder from "../Placeholder.svelte"
   import { getContext, onDestroy } from "svelte"
+  import { Icon } from "@budibase/bbui"
 
   export let label
   export let field
@@ -13,6 +14,7 @@
   export let readonly = false
   export let validation
   export let span = 6
+  export let helpText = null
 
   // Get contexts
   const formContext = getContext("form")
@@ -97,7 +99,14 @@
     {:else}
       <slot />
       {#if fieldState.error}
-        <div class="error">{fieldState.error}</div>
+        <div class="error">
+          <Icon name="Alert" />
+          <span>{fieldState.error}</span>
+        </div>
+      {:else if helpText}
+        <div class="helpText">
+          <Icon name="HelpOutline" /> <span>{helpText}</span>
+        </div>
       {/if}
     {/if}
   </div>
@@ -127,13 +136,45 @@
     position: relative;
     width: 100%;
   }
+
   .error {
+    display: flex;
+    margin-top: var(--spectrum-global-dimension-size-75);
+    align-items: center;
+  }
+
+  .error :global(svg) {
+    width: 14px;
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    );
+    margin-right: 4px;
+  }
+
+  .error span {
     color: var(
       --spectrum-semantic-negative-color-default,
       var(--spectrum-global-color-red-500)
     );
     font-size: var(--spectrum-global-dimension-font-size-75);
+  }
+
+  .helpText {
+    display: flex;
     margin-top: var(--spectrum-global-dimension-size-75);
+    align-items: center;
+  }
+
+  .helpText :global(svg) {
+    width: 14px;
+    color: var(--grey-7);
+    margin-right: 6px;
+  }
+
+  .helpText span {
+    color: var(--grey-5);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
   .spectrum-FieldLabel--right,
   .spectrum-FieldLabel--left {
diff --git a/packages/client/src/components/app/forms/JSONField.svelte b/packages/client/src/components/app/forms/JSONField.svelte
index cf96f54a23..244a76fcfe 100644
--- a/packages/client/src/components/app/forms/JSONField.svelte
+++ b/packages/client/src/components/app/forms/JSONField.svelte
@@ -10,6 +10,7 @@
   export let readonly = false
   export let defaultValue = ""
   export let onChange
+  export let helpText = null
 
   const component = getContext("component")
   const validation = [
@@ -52,6 +53,7 @@
   {readonly}
   {validation}
   {defaultValue}
+  {helpText}
   type="json"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index a9087a0a9c..9b13fca43e 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -13,6 +13,7 @@
   export let defaultValue = ""
   export let format = "auto"
   export let onChange
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -62,6 +63,7 @@
   {readonly}
   {validation}
   {defaultValue}
+  {helpText}
   type="longform"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 519bef4659..5504ce8f38 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -19,6 +19,7 @@
   export let optionsType = "select"
   export let direction = "vertical"
   export let span
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -60,6 +61,7 @@
   {readonly}
   {validation}
   {span}
+  {helpText}
   defaultValue={expandedDefaultValue}
   type="array"
   bind:fieldState
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index f8080419a3..d82a8127af 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -20,6 +20,7 @@
   export let onChange
   export let sort = true
   export let span
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -51,6 +52,7 @@
   {validation}
   {defaultValue}
   {span}
+  {helpText}
   type="options"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 99906fe831..41a071686e 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -20,6 +20,7 @@
   export let datasourceType = "table"
   export let primaryDisplay
   export let span
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -192,6 +193,7 @@
   defaultValue={expandedDefaultValue}
   {type}
   {span}
+  {helpText}
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema
diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index a8dec6649e..c86a98aeed 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -13,6 +13,7 @@
   export let align
   export let onChange
   export let span
+  export let helpText = null
 
   let fieldState
   let fieldApi
@@ -33,6 +34,7 @@
   {validation}
   {defaultValue}
   {span}
+  {helpText}
   type={type === "number" ? "number" : "string"}
   bind:fieldState
   bind:fieldApi
@@ -44,7 +46,6 @@
       on:change={handleChange}
       disabled={fieldState.disabled}
       readonly={fieldState.readonly}
-      error={fieldState.error}
       id={fieldState.fieldId}
       {placeholder}
       {type}