diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 9dae34f08eee..998867dcb4a2 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -2367,7 +2367,6 @@ Generate a media query for a given breakpoint
   - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
   - [fluid-type [mixin]](#fluid-type-mixin)
   - [breadcrumb [mixin]](#breadcrumb-mixin)
-  - [form [mixin]](#form-mixin)
   - [modal [mixin]](#modal-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [toast-notifications [mixin]](#toast-notifications-mixin)
@@ -6839,7 +6838,7 @@ $text-02: if(
       'text-02'
     ),
   map-get($carbon--theme, 'text-02'),
-  #393939
+  #525252
 );
 ```
 
@@ -6943,7 +6942,6 @@ $text-05: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [combo-box [mixin]](#combo-box-mixin)
   - [date-picker [mixin]](#date-picker-mixin)
-  - [form [mixin]](#form-mixin)
   - [search [mixin]](#search-mixin)
   - [time-picker [mixin]](#time-picker-mixin)
 
@@ -18163,24 +18161,19 @@ Form styles
     margin: $carbon--spacing-02 0 0;
     max-height: 0;
     overflow: hidden;
-    line-height: 1.5;
     display: none;
   }
 
-  .#{$prefix}--label + .#{$prefix}--form__helper-text {
-    margin-top: rem(-6px); // when both helper text and label are rendered
+  .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
+    margin-top: 0;
   }
 
   .#{$prefix}--form__helper-text {
     @include type-style('helper-text-01');
-    color: $text-05;
+    color: $text-02;
     z-index: 0;
     opacity: 1;
-    margin-bottom: $carbon--spacing-03;
-
-    @include carbon--breakpoint('sm') {
-      max-width: 75%;
-    }
+    margin-top: $carbon--spacing-02;
   }
 
   .#{$prefix}--label--disabled,
@@ -18194,7 +18187,6 @@ Form styles
 
 - **Group**: [form](#form)
 - **Requires**:
-  - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [carbon--font-family [function]](#carbon--font-family-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
@@ -18203,7 +18195,6 @@ Form styles
   - [text-error [variable]](#text-error-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
-  - [text-05 [variable]](#text-05-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
 
 ## inline-loading
diff --git a/packages/components/src/components/combo-box/combo-box.hbs b/packages/components/src/components/combo-box/combo-box.hbs
index 670eb6b63adf..fa3a06d997e1 100644
--- a/packages/components/src/components/combo-box/combo-box.hbs
+++ b/packages/components/src/components/combo-box/combo-box.hbs
@@ -8,9 +8,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper{{#if inline}} {{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
@@ -22,15 +19,15 @@
         </div>
       </div>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper{{#if inline}} {{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
@@ -45,15 +42,15 @@
         </div>
       </div>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
@@ -76,9 +73,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
@@ -104,10 +98,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
-      here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
@@ -130,10 +120,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
-      here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
@@ -159,10 +145,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
-      here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
@@ -180,11 +162,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
-      here
-    </div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
@@ -207,17 +184,17 @@
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
+      here
+    </div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
-      here
-    </div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
@@ -244,15 +221,17 @@
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
+      here
+    </div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
diff --git a/packages/components/src/components/dropdown/dropdown.hbs b/packages/components/src/components/dropdown/dropdown.hbs
index a7ff77909191..b08587606f11 100644
--- a/packages/components/src/components/dropdown/dropdown.hbs
+++ b/packages/components/src/components/dropdown/dropdown.hbs
@@ -7,25 +7,31 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
     <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
-    {{/unless}}
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
-      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{default.idSuffix}}-menu" aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{default.idSuffix}}-menu"
+        aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1" id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1"
+        id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
-          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
+          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="{{#if index}}false{{else}}true{{/if}}"
+            id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/unless}}
   </div>
 </div>
 
@@ -33,78 +39,94 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
     <span id="{{helper.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
-      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{helper.idSuffix}}-menu" aria-labelledby="{{helper.idSuffix}}-label {{helper.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{helper.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{helper.idSuffix}}-menu" aria-labelledby="{{helper.idSuffix}}-label {{helper.idSuffix}}-value"
+        type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{helper.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list"  role="menu" tabindex="-1" id="{{helper.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{helper.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" role="menu" tabindex="-1" id="{{helper.idSuffix}}-menu"
+        aria-hidden="true" aria-labelledby="{{helper.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
-          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../helper.idSuffix}}-item{{@index}}">{{label}}</a>
+          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="{{#if index}}false{{else}}true{{/if}}"
+            id="{{../helper.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
       </ul>
     </div>
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here; if message is more than one line text
+      should wrap (~100 character count maximum)</div>
   </div>
 </div>
 {{/unless}}
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
-    <span id="{{disabled.idSuffix}}-label" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled" aria-disabled="true">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled" aria-disabled="true">Optional helper text
-      here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
-    {{/unless}}
+    <span id="{{disabled.idSuffix}}-label" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled"
+      aria-disabled="true">Dropdown label</span>
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown{{#if up}} {{@root.prefix}}--dropdown--up{{/if}}{{#if light}} {{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}} {{@root.prefix}}--dropdown--disabled">
-      <button disabled class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{disabled.idSuffix}}-menu" aria-labelledby="{{disabled.idSuffix}}-label {{disabled.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{disabled.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button disabled class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{disabled.idSuffix}}-menu"
+        aria-labelledby="{{disabled.idSuffix}}-label {{disabled.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{disabled.idSuffix}}-value">{{#unless inline}}
+          Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
       <!-- Note: remove `tabindex` from disabled dropdown lists -->
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu" id="{{disabled.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{disabled.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu"
+        id="{{disabled.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{disabled.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
-          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../disabled.idSuffix}}-item{{@index}}">{{label}}</a>
+          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="{{#if index}}false{{else}}true{{/if}}"
+            id="{{../disabled.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled" aria-disabled="true">
+      Optional helper text
+      here; if message is more than one line text
+      should wrap (~100 character count maximum)</div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
-  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
+  <div
+    class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
     <span id="{{invalid.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
-      here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
-    {{/unless}}
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown {{@root.prefix}}--dropdown--invalid {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}}"
       data-invalid>
-      <button  class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{invalid.idSuffix}}-menu" aria-labelledby="{{invalid.idSuffix}}-label {{invalid.idSuffix}}-value" type="button">
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{invalid.idSuffix}}-menu"
+        aria-labelledby="{{invalid.idSuffix}}-label {{invalid.idSuffix}}-value" type="button">
         {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid-icon')}}
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{invalid.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{invalid.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="-1" id="{{invalid.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{invalid.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="-1"
+        id="{{invalid.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{invalid.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
-          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../invalid.idSuffix}}-item{{@index}}">{{label}}</a>
+          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="{{#if index}}false{{else}}true{{/if}}"
+            id="{{../invalid.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
       </ul>
@@ -116,7 +138,7 @@
     </div>
     {{#unless inline}}
     <div class="{{@root.prefix}}--form-requirement">
-      This is not a validation message
+      This is a validation message
     </div>
     {{/unless}}
   </div>
@@ -125,25 +147,31 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
     <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
-    {{/unless}}
     <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
       class="{{@root.prefix}}--dropdown  {{@root.prefix}}--dropdown--show-selected {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
-      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{default.idSuffix}}-menu" aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
-        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="{{default.idSuffix}}-menu"
+        aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown
+          option {{else}}Inline Dropdown label{{/unless}}</span>
         <span class="{{@root.prefix}}--dropdown__arrow-container">
           {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
         </span>
       </button>
-      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1" id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1"
+        id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
         {{#each items as |item index|}}
         <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
-          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
+          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="{{#if index}}false{{else}}true{{/if}}"
+            id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
           {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
         </li>
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/unless}}
   </div>
 </div>
diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
index 12c2f4f04344..49846fb194ba 100644
--- a/packages/components/src/components/form/_form.scss
+++ b/packages/components/src/components/form/_form.scss
@@ -114,24 +114,19 @@
     margin: $carbon--spacing-02 0 0;
     max-height: 0;
     overflow: hidden;
-    line-height: 1.5;
     display: none;
   }
 
-  .#{$prefix}--label + .#{$prefix}--form__helper-text {
-    margin-top: rem(-6px); // when both helper text and label are rendered
+  .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
+    margin-top: 0;
   }
 
   .#{$prefix}--form__helper-text {
     @include type-style('helper-text-01');
-    color: $text-05;
+    color: $text-02;
     z-index: 0;
     opacity: 1;
-    margin-bottom: $carbon--spacing-03;
-
-    @include carbon--breakpoint('sm') {
-      max-width: 75%;
-    }
+    margin-top: $carbon--spacing-02;
   }
 
   .#{$prefix}--label--disabled,
diff --git a/packages/components/src/components/form/form.hbs b/packages/components/src/components/form/form.hbs
index 90fd01cff343..0034320bf878 100644
--- a/packages/components/src/components/form/form.hbs
+++ b/packages/components/src/components/form/form.hbs
@@ -7,20 +7,20 @@
 
 <div class="{{@root.prefix}}--form-item">
   <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
-  <div class="{{prefix}}--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
   <input id="text-input-3" type="text"
     class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}"
     placeholder="Optional placeholder text">
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
 </div>
 <div class="{{@root.prefix}}--form-item">
   <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
+  <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
+    rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <div class="{{prefix}}--form__helper-text">
     Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
   </div>
-  <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
-    rows="4" cols="50" placeholder="Placeholder text."></textarea>
 </div>
 <div class="{{@root.prefix}}--form-item">
   <div
diff --git a/packages/components/src/components/list-box/list-box.hbs b/packages/components/src/components/list-box/list-box.hbs
index cc731fe80849..455efd5cd1d7 100644
--- a/packages/components/src/components/list-box/list-box.hbs
+++ b/packages/components/src/components/list-box/list-box.hbs
@@ -8,9 +8,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">List box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
@@ -21,15 +18,15 @@
         </div>
       </div>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">List box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
@@ -51,11 +48,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">List box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
-      here
-    </div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
@@ -76,11 +68,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">List box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
-      here
-    </div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
@@ -91,17 +78,17 @@
         </div>
       </div>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
+      here
+    </div>
+    {{/unless}}
   </div>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">List box label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
-      here
-    </div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
@@ -124,5 +111,10 @@
         {{/each}}
       </ul>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
+      here
+    </div>
+    {{/unless}}
   </div>
 </div>
diff --git a/packages/components/src/components/multi-select/multi-select.hbs b/packages/components/src/components/multi-select/multi-select.hbs
index 58f5ab879639..fe6685480224 100644
--- a/packages/components/src/components/multi-select/multi-select.hbs
+++ b/packages/components/src/components/multi-select/multi-select.hbs
@@ -8,9 +8,6 @@
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Multi-Select label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
@@ -25,14 +22,14 @@
         </div>
       </div>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
   </div>
 </div>
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Multi-Select label</label>
-    {{#unless inline}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
-    {{/unless}}
     <div
       class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded {{@root.prefix}}--multi-select--selected{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
@@ -70,5 +67,8 @@
         {{/each}}
       </fieldset>
     </div>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
   </div>
 </div>
diff --git a/packages/components/src/components/number-input/number-input.hbs b/packages/components/src/components/number-input/number-input.hbs
index e195e1e4788b..737609922428 100644
--- a/packages/components/src/components/number-input/number-input.hbs
+++ b/packages/components/src/components/number-input/number-input.hbs
@@ -87,9 +87,6 @@
     {{prefix}}--number--helpertext
   ">
     <label for="number-input3" class="{{prefix}}--label">Number input label</label>
-    <div class="{{prefix}}--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
     <div class="{{prefix}}--number__input-wrapper">
       <input id="number-input3" type="number" min="0" max="100" value="1">
       <div class="{{prefix}}--number__controls">
@@ -103,6 +100,9 @@
         </button>
       </div>
     </div>
+    <div class="{{prefix}}--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
   </div>
 </div>
 
@@ -113,9 +113,6 @@
     {{prefix}}--number--helpertext
   ">
     <label for="number-input4" class="{{prefix}}--label">Number input label</label>
-    <div class="{{prefix}}--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
     <div class="{{prefix}}--number__input-wrapper">
       <input id="number-input4" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
       {{ carbon-icon 'WarningFilled16' class=(add prefix '--number__invalid')}}
@@ -215,9 +212,6 @@
     {{prefix}}--number--helpertext
   ">
     <label for="mobile-number-input3" class="{{prefix}}--label">Number input label</label>
-    <div class="{{prefix}}--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
     <div class="{{prefix}}--number__input-wrapper">
       <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
         aria-live="polite" aria-atomic="true">
@@ -229,6 +223,9 @@
         {{ carbon-icon 'CaretUpGlyph' }}
       </button>
     </div>
+    <div class="{{prefix}}--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
   </div>
 </div>
 
@@ -240,9 +237,6 @@
     {{prefix}}--number--helpertext
   ">
     <label for="mobile-number-input4" class="{{prefix}}--label">Number input label</label>
-    <div class="{{prefix}}--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
     <div class="{{prefix}}--number__input-wrapper">
       <button aria-label="decrease number input" class="{{prefix}}--number__control-btn down-icon" type="button"
         aria-live="polite" aria-atomic="true">
diff --git a/packages/components/src/components/select/select.hbs b/packages/components/src/components/select/select.hbs
index ade0d8bbcffb..915d40a0d4e1 100644
--- a/packages/components/src/components/select/select.hbs
+++ b/packages/components/src/components/select/select.hbs
@@ -9,11 +9,6 @@
   <div
     class="{{@root.prefix}}--select{{#if inline}} {{@root.prefix}}--select--inline{{/if}}{{#if light}} {{@root.prefix}}--select--light{{/if}}{{#if invalid}} {{@root.prefix}}--select--invalid{{/if}}">
     <label for="select-id" class="{{@root.prefix}}--label">Select label</label>
-    {{#unless inline}}
-    {{#if helperText}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
-    {{/if}}
-    {{/unless}}
     {{#if inline}}
     <div class="{{@root.prefix}}--select-input--inline__wrapper">
       {{/if}}
@@ -47,6 +42,11 @@
         Validation message here
       </div>
       {{/if}}
+      {{#unless inline}}
+      {{#if helperText}}
+      <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+      {{/if}}
+      {{/unless}}
     </div>
     {{#if inline}}
     {{#if helperText}}
@@ -61,11 +61,6 @@
     class="{{@root.prefix}}--select{{#if inline}} {{@root.prefix}}--select--inline{{/if}}{{#if light}} {{@root.prefix}}--select--light{{/if}}{{#if invalid}} {{@root.prefix}}--select--invalid{{/if}} {{@root.prefix}}--select--disabled">
     <label for="select-id-disabled" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Select
       label</label>
-    {{#unless inline}}
-    {{#if helperText}}
-    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
-    {{/if}}
-    {{/unless}}
     {{#if inline}}
     <div class="{{@root.prefix}}--select-input--inline__wrapper">
       {{/if}}
@@ -86,6 +81,11 @@
         Validation message here
       </div>
       {{/if}}
+      {{#unless inline}}
+      {{#if helperText}}
+      <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+      {{/if}}
+      {{/unless}}
     </div>
     {{#if inline}}
     {{#if helperText}}
diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index 1c14c30b32cc..9e847e094b6f 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -27,32 +27,16 @@
 
     background-color: $field-01;
     width: 100%;
+    height: 100%;
     min-width: 10rem;
     min-height: rem(40px);
     padding: rem(11px) $carbon--spacing-05;
     color: $text-01;
-    order: 3;
     resize: vertical;
     border: none;
     border-bottom: 1px solid $ui-04;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
-
-    & ~ .#{$prefix}--form__helper-text {
-      margin-top: 0;
-      order: 2;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 4;
-      color: $text-error;
-      font-weight: 400;
-      margin-top: $carbon--spacing-02;
-
-      &::before {
-        display: none;
-      }
-    }
   }
 
   .#{$prefix}--text-area:focus,
diff --git a/packages/components/src/components/text-area/text-area.hbs b/packages/components/src/components/text-area/text-area.hbs
index 1758a67b14d9..5962938e80a3 100644
--- a/packages/components/src/components/text-area/text-area.hbs
+++ b/packages/components/src/components/text-area/text-area.hbs
@@ -29,23 +29,23 @@
 
 <div class="{{@root.prefix}}--form-item">
   <label for="text-area-4" class="{{@root.prefix}}--label">Text Area label</label>
-  <div class="{{@root.prefix}}--form__helper-text">
-    Optional helper text goes here
-  </div>
   <div class="{{@root.prefix}}--text-area__wrapper">
     <textarea id="text-area-4"
       class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
       rows="4" cols="50" placeholder="Placeholder text."></textarea>
   </div>
+  <div class="{{@root.prefix}}--form__helper-text">
+    Optional helper text goes here
+  </div>
 </div>
 
 <div class="bx--form-item">
   <label for="text-area-5" class="bx--label bx--label--disabled">Text Area label</label>
-  <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">
-    Optional helper text goes here
-  </div>
   <div class="{{@root.prefix}}--text-area__wrapper">
     <textarea id="text-area-5" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4"
       cols="50" placeholder="Placeholder text." disabled></textarea>
   </div>
+  <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">
+    Optional helper text goes here
+  </div>
 </div>
diff --git a/packages/components/src/components/text-input/text-input.hbs b/packages/components/src/components/text-input/text-input.hbs
index 14b68e37db70..6d120c4224b2 100644
--- a/packages/components/src/components/text-input/text-input.hbs
+++ b/packages/components/src/components/text-input/text-input.hbs
@@ -55,9 +55,6 @@
 <div {{#if password}} data-text-input {{/if}}
   class="{{prefix}}--form-item {{prefix}}--text-input-wrapper{{#if password}} {{prefix}}--password-input-wrapper{{/if}}">
   <label for="text-input-5" class="{{prefix}}--label">Text Input label</label>
-  <div class="{{prefix}}--form__helper-text">
-    Optional helper text goes here
-  </div>
   <div class="{{prefix}}--text-input__field-wrapper">
     {{#unless password}}
     <input id="text-input-5" type="text"
@@ -74,15 +71,15 @@
     </button>
     {{/unless}}
   </div>
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text goes here
+  </div>
 </div>
 
 <div {{#if password}} data-text-input {{/if}}
   class="{{prefix}}--form-item {{prefix}}--text-input-wrapper{{#if password}} {{prefix}}--password-input-wrapper{{/if}}"
   style="width: 320px">
   <label for="text-input-6" class="{{prefix}}--label">Text Input label</label>
-  <div class="{{prefix}}--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
   <div class="{{prefix}}--text-input__field-wrapper">
     {{#unless password}}
     <input id="text-input-6" type="text"
@@ -99,14 +96,14 @@
     </button>
     {{/unless}}
   </div>
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
 </div>
 
 <div {{#if password}} data-text-input {{/if}}
   class="{{prefix}}--form-item {{prefix}}--text-input-wrapper{{#if password}} {{prefix}}--password-input-wrapper{{/if}}">
   <label for="text-input-7" class="{{prefix}}--label {{prefix}}--label--disabled">Text Input label</label>
-  <div class="{{prefix}}--form__helper-text {{prefix}}--form__helper-text--disabled">
-    Optional helper text goes here
-  </div>
   <div class="{{prefix}}--text-input__field-wrapper">
     {{#unless password}}
     <input id="text-input-7" type="text"
@@ -125,4 +122,7 @@
     </button>
     {{/unless}}
   </div>
+  <div class="{{prefix}}--form__helper-text {{prefix}}--form__helper-text--disabled">
+    Optional helper text goes here
+  </div>
 </div>
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index fdef11cc1d1f..0a76dd6140d2 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -6355,7 +6355,7 @@ $text-02: if(
       'text-02'
     ),
   map-get($carbon--theme, 'text-02'),
-  #393939
+  #525252
 );
 ```
 
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index eca975a783d4..0ba127249819 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -338,11 +338,6 @@ export default class ComboBox extends React.Component {
                 {titleText}
               </label>
             )}
-            {helperText && (
-              <div id={comboBoxHelperId} className={helperClasses}>
-                {helperText}
-              </div>
-            )}
             <ListBox
               className={className}
               disabled={disabled}
@@ -431,6 +426,11 @@ export default class ComboBox extends React.Component {
                 </ListBox.Menu>
               )}
             </ListBox>
+            {helperText && !invalid && (
+              <div id={comboBoxHelperId} className={helperClasses}>
+                {helperText}
+              </div>
+            )}
           </div>
         )}
       </Downshift>
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
index e2f52c90c917..3330ffaea17c 100644
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -63,8 +63,8 @@ const props = () => ({
   ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
-  titleText: text('Title (titleText)', 'This is not a dropdown title.'),
-  helperText: text('Helper text (helperText)', 'This is not some helper text.'),
+  titleText: text('Title (titleText)', 'This is a dropdown title.'),
+  helperText: text('Helper text (helperText)', 'This is some helper text.'),
   invalid: boolean('Show form validation UI (invalid)', false),
   invalidText: text(
     'Form validation UI content (invalidText)',
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 4edc58df3bc2..181cd83aeea2 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -118,7 +118,6 @@ function Dropdown({
           {titleText}
         </label>
       )}
-      {!inline && helper}
       <ListBox
         aria-label={ariaLabel}
         size={size}
@@ -169,6 +168,7 @@ function Dropdown({
             })}
         </ListBox.Menu>
       </ListBox>
+      {!inline && !invalid && helper}
     </div>
   );
 }
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index bdb030722fdf..1e1001bf3454 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -473,8 +473,8 @@ export default class FilterableMultiSelect extends React.Component {
     return (
       <div className={wrapperClasses}>
         {title}
-        {!inline && helper}
         {input}
+        {!inline && !invalid ? helper : null}
       </div>
     );
   }
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
index 8f70c529a5b7..b1b7e88a5ba2 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect-story.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -65,7 +65,7 @@ const directions = {
 const props = () => ({
   id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
   titleText: text('Title (titleText)', 'Multiselect title'),
-  helperText: text('Helper text (helperText)', 'This is not helper text'),
+  helperText: text('Helper text (helperText)', 'This is helper text'),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
   useTitleInItem: boolean('Show tooltip on hover', false),
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index ea9d1932da0b..7e915e8bf893 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -176,11 +176,6 @@ function MultiSelect({
           {titleText}
         </label>
       )}
-      {!inline && helperText && (
-        <div id={helperId} className={helperClasses}>
-          {helperText}
-        </div>
-      )}
       <ListBox
         id={id}
         type={type}
@@ -245,6 +240,11 @@ function MultiSelect({
             })}
         </ListBox.Menu>
       </ListBox>
+      {!inline && !invalid && helperText && (
+        <div id={helperId} className={helperClasses}>
+          {helperText}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
index d765dff89ddb..eb499c82bf92 100644
--- a/packages/react/src/components/NumberInput/NumberInput.js
+++ b/packages/react/src/components/NumberInput/NumberInput.js
@@ -418,7 +418,6 @@ class NumberInput extends Component {
             return (
               <>
                 {labelText}
-                {helper}
                 <div className={`${prefix}--number__input-wrapper`}>
                   <input
                     data-invalid={isInputInvalid}
@@ -456,6 +455,7 @@ class NumberInput extends Component {
                     </button>
                   </div>
                 </div>
+                {isInputInvalid ? null : helper}
               </>
             );
           })()}
diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
index 99006f3ebea0..02d664ddb6c8 100644
--- a/packages/react/src/components/Select/Select.js
+++ b/packages/react/src/components/Select/Select.js
@@ -96,7 +96,6 @@ const Select = React.forwardRef(function Select(
             {labelText}
           </label>
         )}
-        {!inline && helper}
         {inline && (
           <>
             <div className={`${prefix}--select-input--inline__wrapper`}>
@@ -107,7 +106,6 @@ const Select = React.forwardRef(function Select(
               </div>
               {error}
             </div>
-            {helper}
           </>
         )}
         {!inline && (
@@ -117,7 +115,7 @@ const Select = React.forwardRef(function Select(
             {input}
           </div>
         )}
-        {!inline && error}
+        {!inline && error ? error : helper}
       </div>
     </div>
   );
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index f4c53f27220a..90ff47740b9c 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -90,7 +90,6 @@ const TextArea = React.forwardRef(function TextArea(
   return (
     <div className={`${prefix}--form-item`}>
       {label}
-      {helper}
       <div
         className={`${prefix}--text-area__wrapper`}
         data-invalid={invalid || null}>
@@ -99,7 +98,7 @@ const TextArea = React.forwardRef(function TextArea(
         )}
         {input}
       </div>
-      {error}
+      {invalid ? error : helper}
     </div>
   );
 });
diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
index 58a34b73326e..c3fecd4cdf2d 100644
--- a/packages/react/src/components/TextInput/ControlledPasswordInput.js
+++ b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -117,7 +117,6 @@ const ControlledPasswordInput = React.forwardRef(
       <div
         className={`${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`}>
         {label}
-        {helper}
         <div
           className={`${prefix}--text-input__field-wrapper`}
           data-invalid={invalid || null}>
@@ -128,7 +127,7 @@ const ControlledPasswordInput = React.forwardRef(
           )}
           {input}
         </div>
-        {error}
+        {error ? error : helper}
       </div>
     );
   }
diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
index 5ad7d865a015..96bd8ba91176 100644
--- a/packages/react/src/components/TextInput/PasswordInput.js
+++ b/packages/react/src/components/TextInput/PasswordInput.js
@@ -119,7 +119,6 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     <div
       className={`${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`}>
       {label}
-      {helper}
       <div
         className={`${prefix}--text-input__field-wrapper`}
         data-invalid={invalid || null}>
@@ -128,7 +127,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
         )}
         {input}
       </div>
-      {error}
+      {error ? error : helper}
     </div>
   );
 });
diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
index 9fca7079da3e..b842d3d94caa 100644
--- a/packages/react/src/components/TextInput/TextInput.js
+++ b/packages/react/src/components/TextInput/TextInput.js
@@ -96,7 +96,6 @@ const TextInput = React.forwardRef(function TextInput(
   return (
     <div className={inputWrapperClasses}>
       {label}
-      {helper}
       <div
         className={`${prefix}--text-input__field-wrapper`}
         data-invalid={invalid || null}>
@@ -109,6 +108,7 @@ const TextInput = React.forwardRef(function TextInput(
         {isFluid ? error : null}
       </div>
       {isFluid ? null : error}
+      {!invalid && !isFluid && helper}
     </div>
   );
 });
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
index 74130b205434..8d7b36f502b6 100644
--- a/packages/themes/docs/sass.md
+++ b/packages/themes/docs/sass.md
@@ -2818,7 +2818,7 @@ $text-02: if(
       'text-02'
     ),
   map-get($carbon--theme, 'text-02'),
-  #393939
+  #525252
 );
 ```
 
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index eac56c606ef1..304d4f0ce187 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -56,7 +56,7 @@ export const ui04 = gray50;
 export const ui05 = gray100;
 
 export const text01 = gray100;
-export const text02 = gray80;
+export const text02 = gray70;
 export const text03 = gray40;
 export const text04 = white;
 export const text05 = gray60;
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 8bfa7c2c3ffe..4c3c4f0c57ce 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -56,7 +56,7 @@ export const ui04 = gray50;
 export const ui05 = gray100;
 
 export const text01 = gray100;
-export const text02 = gray80;
+export const text02 = gray70;
 export const text03 = gray40;
 export const text04 = white;
 export const text05 = gray60;