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>
2023-11-20 15:05:58 +00:00 · 2023-11-20 15:05:58 +00:00 · 7e037099b4
parent 27b2a3b8d7
commit 7e037099b4
46 changed files with 189 additions and 138 deletions
--- 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>
--- 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}
--- 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
--- 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
--- 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}
  >
--- 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
--- 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;
  }
--- 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
--- 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}
--- 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"
--- 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}
--- 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
--- 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>
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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>
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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>
--- 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}
--- 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}
--- 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>
--- 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",
--- 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
--- 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
--- 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
 >
--- 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
--- 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 {
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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}