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

@@ -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>

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}

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

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

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}
   >

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

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;
   }

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
+<div class="spectrum-InputGroup" class:is-disabled={disabled}>
-  class="spectrum-InputGroup"
-  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={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

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}

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"

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
+<div class="spectrum-InputGroup" class:is-disabled={disabled}>
-  class="spectrum-InputGroup"
-  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={focus}
     class:is-full-width={!secondaryOptions.length}

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

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>

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}

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}

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}

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}

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}

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}

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}

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>

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}

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}

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}

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}

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}

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}

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}

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}

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}

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>

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}

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}

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>

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",

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

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

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
 >

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

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 {

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

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

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

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

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

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}