diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
index c84445b95ca..56f71a4f536 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
+import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
@@ -35,12 +35,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        fieldId="text-file-with-restrictions-example"
-        helperText="Upload a CSV file"
-        helperTextInvalid="Must be a CSV file no larger than 1 KB"
-        validated={isRejected ? 'error' : 'default'}
-      >
+      <FormGroup fieldId="text-file-with-restrictions-example">
         <FileUpload
           id="text-file-with-restrictions-example"
           type="text"
@@ -62,6 +57,13 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={isRejected ? 'error' : 'default'}>
+              {isRejected ? 'Must be a CSV file no larger than 1 KB' : 'Upload a CSV file'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
index 6a63fa728b2..ddd9a3e5723 100644
--- a/packages/react-core/src/components/Form/FormGroup.tsx
+++ b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { ValidatedOptions } from '../../helpers/constants';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
@@ -18,28 +17,12 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   labelIcon?: React.ReactElement;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
-  /**
-   * Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state.
-   * If set to error, text color of helper text will be modified to indicate error state.
-   * If set to warning, text color of helper text will be modified to indicate warning state.
-   */
-  validated?: 'success' | 'warning' | 'error' | 'default';
   /** Sets the FormGroup isInline. */
   isInline?: boolean;
   /** Sets the FormGroupControl to be stacked */
   isStack?: boolean;
   /** Removes top spacer from label. */
   hasNoPaddingTop?: boolean;
-  /** Helper text regarding the field. It can be a simple text or an object. */
-  helperText?: React.ReactNode;
-  /** Flag to position the helper text before the field. False by default */
-  isHelperTextBeforeField?: boolean;
-  /** Helper text after the field when the field is invalid. It can be a simple text or an object. */
-  helperTextInvalid?: React.ReactNode;
-  /** Icon displayed to the left of the helper text. */
-  helperTextIcon?: React.ReactNode;
-  /** Icon displayed to the left of the helper text when the field is invalid. */
-  helperTextInvalidIcon?: React.ReactNode;
   /** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
    * If only one field is included, its ID attribute and this prop must be the same.
    */
@@ -57,53 +40,13 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   labelInfo,
   labelIcon,
   isRequired = false,
-  validated = 'default',
   isInline = false,
   hasNoPaddingTop = false,
   isStack = false,
-  helperText,
-  isHelperTextBeforeField = false,
-  helperTextInvalid,
-  helperTextIcon,
-  helperTextInvalidIcon,
   fieldId,
   role,
   ...props
 }: FormGroupProps) => {
-  const validHelperText =
-    typeof helperText !== 'string' ? (
-      helperText
-    ) : (
-      <div
-        className={css(
-          styles.formHelperText,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning
-        )}
-        id={`${fieldId}-helper`}
-        aria-live="polite"
-      >
-        {helperTextIcon && <span className={css(styles.formHelperTextIcon)}>{helperTextIcon}</span>}
-        {helperText}
-      </div>
-    );
-
-  const inValidHelperText =
-    typeof helperTextInvalid !== 'string' ? (
-      helperTextInvalid
-    ) : (
-      <div className={css(styles.formHelperText, styles.modifiers.error)} id={`${fieldId}-helper`} aria-live="polite">
-        {helperTextInvalidIcon && <span className={css(styles.formHelperTextIcon)}>{helperTextInvalidIcon}</span>}
-        {helperTextInvalid}
-      </div>
-    );
-
-  const showValidHelperTxt = (validationType: 'success' | 'warning' | 'error' | 'default') =>
-    validationType !== ValidatedOptions.error && helperText ? validHelperText : '';
-
-  const helperTextToDisplay =
-    validated === ValidatedOptions.error && helperTextInvalid ? inValidHelperText : showValidHelperTxt(validated);
-
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
@@ -124,7 +67,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
 
   return (
     <GenerateId>
-      {randomId => (
+      {(randomId) => (
         <div
           className={css(styles.formGroup, className)}
           {...(role && { role })}
@@ -156,9 +99,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
               isStack && styles.modifiers.stack
             )}
           >
-            {isHelperTextBeforeField && helperTextToDisplay}
             {children}
-            {!isHelperTextBeforeField && helperTextToDisplay}
           </div>
         </div>
       )}
diff --git a/packages/react-core/src/components/Form/FormHelperText.tsx b/packages/react-core/src/components/Form/FormHelperText.tsx
index e61bd26b231..2807886eac9 100644
--- a/packages/react-core/src/components/Form/FormHelperText.tsx
+++ b/packages/react-core/src/components/Form/FormHelperText.tsx
@@ -3,43 +3,19 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export interface FormHelperTextProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Helper Text Item */
+  /** Content rendered inside the helper text wrapper */
   children?: React.ReactNode;
-  /** Adds error styling to the Helper Text  * */
-  isError?: boolean;
-  /** Hides the helper text * */
-  isHidden?: boolean;
-  /** Additional classes added to the Helper Text Item  */
+  /** Additional classes added to the helper text wrapper  */
   className?: string;
-  /** Icon displayed to the left of the helper text. */
-  icon?: React.ReactNode;
-  /** Component type of the form helper text */
-  component?: 'p' | 'div';
 }
 
 export const FormHelperText: React.FunctionComponent<FormHelperTextProps> = ({
   children = null,
-  isError = false,
-  isHidden = true,
   className = '',
-  icon = null,
-  component = 'p',
   ...props
-}: FormHelperTextProps) => {
-  const Component = component as any;
-  return (
-    <Component
-      className={css(
-        styles.formHelperText,
-        isError && styles.modifiers.error,
-        isHidden && styles.modifiers.hidden,
-        className
-      )}
-      {...props}
-    >
-      {icon && <span className={css(styles.formHelperTextIcon)}>{icon}</span>}
-      {children}
-    </Component>
-  );
-};
+}: FormHelperTextProps) => (
+  <div className={css(styles.formHelperText, className)} {...props}>
+    {children}
+  </div>
+);
 FormHelperText.displayName = 'FormHelperText';
diff --git a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
index a3c66f2c470..0e72a884954 100644
--- a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
@@ -12,7 +12,7 @@ describe('FormGroup', () => {
 
   test('should render default form group variant', () => {
     const { asFragment } = render(
-      <FormGroup label="label" fieldId="label-id" helperText="this is helper text">
+      <FormGroup label="label" fieldId="label-id">
         <input id="label-id" />
       </FormGroup>
     );
@@ -21,7 +21,7 @@ describe('FormGroup', () => {
 
   test('should render inline form group variant', () => {
     render(
-      <FormGroup isInline label="label" fieldId="label-id" helperText="this is helper text">
+      <FormGroup isInline label="label" fieldId="label-id">
         <input id="label-id" />
       </FormGroup>
     );
@@ -30,13 +30,7 @@ describe('FormGroup', () => {
 
   test('should render no padding-top form group variant', () => {
     render(
-      <FormGroup
-        hasNoPaddingTop
-        label="label"
-        fieldId="label-id"
-        helperText="this is helper text"
-        data-testid="form-group-test-id"
-      >
+      <FormGroup hasNoPaddingTop label="label" fieldId="label-id" data-testid="form-group-test-id">
         <input id="label-id" />
       </FormGroup>
     );
@@ -80,30 +74,10 @@ describe('FormGroup', () => {
     expect(screen.getByText('label')).toBeInTheDocument();
   });
 
-  test('should render form group variant with node helperText', () => {
-    render(
-      <FormGroup label="Label" fieldId="label-id" helperText={<h1>Header</h1>}>
-        <input id="label-id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByRole('heading', { name: 'Header' })).toBeInTheDocument();
-  });
-
-  test('should render form group variant with function helperText', () => {
-    render(
-      <FormGroup label="Label" fieldId="label-id" helperText={returnFunction()}>
-        <input id="label-id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByText('label')).toBeInTheDocument();
-  });
-
   test('should render horizontal form group variant', () => {
     const { asFragment } = render(
       <Form isHorizontal>
-        <FormGroup label="label" fieldId="label-id" helperText="this is helperText">
+        <FormGroup label="label" fieldId="label-id">
           <input id="label-id" />
         </FormGroup>
       </Form>
@@ -114,18 +88,7 @@ describe('FormGroup', () => {
   test('should render stacked horizontal form group variant', () => {
     const { asFragment } = render(
       <Form isHorizontal>
-        <FormGroup label="label" fieldId="label-id" isStack helperText="this is helperText">
-          <input id="label-id" />
-        </FormGroup>
-      </Form>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render helper text above input', () => {
-    const { asFragment } = render(
-      <Form isHorizontal>
-        <FormGroup label="label" fieldId="label-id" helperText="this is helperText" isHelperTextBeforeField>
+        <FormGroup label="label" fieldId="label-id" isStack>
           <input id="label-id" />
         </FormGroup>
       </Form>
@@ -142,58 +105,6 @@ describe('FormGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should render form group invalid variant', () => {
-    const { asFragment } = render(
-      <FormGroup label="label" fieldId="label-id" validated={'error'} helperTextInvalid="Invalid FormGroup">
-        <input id="id" />
-      </FormGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render form group validated success variant', () => {
-    const { asFragment } = render(
-      <FormGroup
-        label="label"
-        fieldId="label-id"
-        validated={ValidatedOptions.success}
-        helperText="Validated FormGroup"
-        data-testid="form-group-test-id"
-      >
-        <input id="id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-success');
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render form group validated error variant', () => {
-    const { asFragment } = render(
-      <FormGroup label="label" fieldId="label-id" validated={ValidatedOptions.error} helperText="Validated FormGroup">
-        <input id="id" />
-      </FormGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render form group validated warning variant', () => {
-    const { asFragment } = render(
-      <FormGroup
-        label="label"
-        fieldId="label-id"
-        validated={ValidatedOptions.warning}
-        helperText="Validated FormGroup"
-        data-testid="form-group-test-id"
-      >
-        <input id="id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-warning');
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('should render correctly when label is not a string with Children = Array', () => {
     const { asFragment } = render(
       <FormGroup fieldId="id" label={returnFunction()}>
@@ -245,7 +156,7 @@ describe('FormGroup', () => {
       const inputs = screen.getAllByRole('textbox');
 
       await user.click(labelElement);
-      inputs.forEach(input => {
+      inputs.forEach((input) => {
         expect(input).not.toHaveFocus();
       });
     });
diff --git a/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx b/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx
index fe3277253f1..4bf14b4d3e4 100644
--- a/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx
@@ -7,20 +7,7 @@ import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {
   test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(
-      <FormHelperText isError isHidden={false}>
-        test
-      </FormHelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders with icon', () => {
-    const { asFragment } = render(
-      <FormHelperText isError isHidden={false} icon={<ExclamationCircleIcon />}>
-        test
-      </FormHelperText>
-    );
+    const { asFragment } = render(<FormHelperText>test</FormHelperText>);
     expect(asFragment()).toMatchSnapshot();
   });
 
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
index a1cf9815318..3add5f8e9eb 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
@@ -63,160 +63,6 @@ exports[`FormGroup should render default form group variant 1`] = `
       <input
         id="label-id"
       />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text"
-        id="label-id-helper"
-      >
-        this is helper text
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group invalid variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text pf-m-error"
-        id="label-id-helper"
-      >
-        Invalid FormGroup
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group validated error variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group validated success variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-    data-testid="form-group-test-id"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text pf-m-success"
-        id="label-id-helper"
-      >
-        Validated FormGroup
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group validated warning variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-    data-testid="form-group-test-id"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text pf-m-warning"
-        id="label-id-helper"
-      >
-        Validated FormGroup
-      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -350,49 +196,6 @@ exports[`FormGroup should render form group with additonal label info 1`] = `
 </DocumentFragment>
 `;
 
-exports[`FormGroup should render helper text above input 1`] = `
-<DocumentFragment>
-  <form
-    class="pf-c-form pf-m-horizontal"
-    novalidate=""
-  >
-    <div
-      class="pf-c-form__group"
-    >
-      <div
-        class="pf-c-form__group-label"
-      >
-        <label
-          class="pf-c-form__label"
-          for="label-id"
-        >
-          <span
-            class="pf-c-form__label-text"
-          >
-            label
-          </span>
-        </label>
-         
-      </div>
-      <div
-        class="pf-c-form__group-control"
-      >
-        <div
-          aria-live="polite"
-          class="pf-c-form__helper-text"
-          id="label-id-helper"
-        >
-          this is helperText
-        </div>
-        <input
-          id="label-id"
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
 exports[`FormGroup should render horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
@@ -423,13 +226,6 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
         <input
           id="label-id"
         />
-        <div
-          aria-live="polite"
-          class="pf-c-form__helper-text"
-          id="label-id-helper"
-        >
-          this is helperText
-        </div>
       </div>
     </div>
   </form>
@@ -466,13 +262,6 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
         <input
           id="label-id"
         />
-        <div
-          aria-live="polite"
-          class="pf-c-form__helper-text"
-          id="label-id-helper"
-        >
-          this is helperText
-        </div>
       </div>
     </div>
   </form>
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap
index d2b7e7d9b5e..f56fec72ef1 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap
@@ -2,59 +2,32 @@
 
 exports[`FormHelperText LoginFooterItem  with custom node 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-hidden"
-  />
-  <div>
-    My custom node
+  <div
+    class="pf-c-form__helper-text"
+  >
+    <div>
+      My custom node
+    </div>
   </div>
-  <p />
 </DocumentFragment>
 `;
 
 exports[`FormHelperText className is added to the root element 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-hidden extra-class"
+  <div
+    class="pf-c-form__helper-text extra-class"
   >
     test
-  </p>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormHelperText renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-error"
+  <div
+    class="pf-c-form__helper-text"
   >
     test
-  </p>
-</DocumentFragment>
-`;
-
-exports[`FormHelperText renders with icon 1`] = `
-<DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-error"
-  >
-    <span
-      class="pf-c-form__helper-text-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 512 512"
-        width="1em"
-      >
-        <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-        />
-      </svg>
-    </span>
-    test
-  </p>
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md
index 5a2edfe76d9..0cd0163fa19 100644
--- a/packages/react-core/src/components/Form/examples/Form.md
+++ b/packages/react-core/src/components/Form/examples/Form.md
@@ -14,7 +14,7 @@ propComponents:
     'FormFieldGroupHeader',
     'FormFieldGroupHeaderTitleTextObject',
     'Button',
-    'Popover',
+    'Popover'
   ]
 ---
 
@@ -40,62 +40,76 @@ import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 
 ## Examples
 
+When using helper text inside a `FormGroup`, the `HelperText` component should be wrapped with the `FormHelperText` component to provide additional spacing.
+
 ### Basic
 
 ```ts file="./FormBasic.tsx"
+
 ```
 
 ### Horizontal
 
 ```ts file="./FormHorizontal.tsx"
+
 ```
 
 ### Limit width
 
 ```ts file="./FormLimitWidth.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./FormInvalid.tsx"
+
 ```
 
 ### Invalid with form alert
 
 ```ts file="./FormInvalidWithFormAlert.tsx"
+
 ```
 
 ### Validated
 
 ```ts file="./FormValidated.tsx"
+
 ```
 
 ### Horizontal stacked no padding top
 
 ```ts file="./FormHorizontalStacked.tsx"
+
 ```
 
 ### Horizontal stacked helper text on top
 
 ```ts file="./FormHorizontalHelper.tsx"
+
 ```
 
 ### Form group with additional label info
 
 ```ts file="./FormGroupLabelInfo.tsx"
+
 ```
 
 ### Form Sections
 
 ```ts file="./FormSections.tsx"
+
 ```
 
 ### Grid form
 
 ```ts file="./FormGrid.tsx"
+
 ```
 
 ### Field Groups
 
 ```ts file="./FormFieldGroups.tsx"
+
 ```
diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx
index 4fb293b2f40..807bfb00e10 100644
--- a/packages/react-core/src/components/Form/examples/FormBasic.tsx
+++ b/packages/react-core/src/components/Form/examples/FormBasic.tsx
@@ -1,5 +1,17 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Checkbox,
+  Popover,
+  ActionGroup,
+  Button,
+  Radio,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const FormBasic: React.FunctionComponent = () => {
@@ -54,7 +66,7 @@ export const FormBasic: React.FunctionComponent = () => {
             <button
               type="button"
               aria-label="More info for name field"
-              onClick={e => e.preventDefault()}
+              onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-01"
               className="pf-c-form__group-label-help"
             >
@@ -64,7 +76,6 @@ export const FormBasic: React.FunctionComponent = () => {
         }
         isRequired
         fieldId="simple-form-name-01"
-        helperText="Include your middle name if you have one."
       >
         <TextInput
           isRequired
@@ -75,6 +86,11 @@ export const FormBasic: React.FunctionComponent = () => {
           value={name}
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
       <FormGroup label="Email" isRequired fieldId="simple-form-email-01">
         <TextInput
diff --git a/packages/react-core/src/components/Form/examples/FormGrid.tsx b/packages/react-core/src/components/Form/examples/FormGrid.tsx
index 99a2711cff8..1c66a9375e2 100644
--- a/packages/react-core/src/components/Form/examples/FormGrid.tsx
+++ b/packages/react-core/src/components/Form/examples/FormGrid.tsx
@@ -1,5 +1,14 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Grid, GridItem } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Grid,
+  GridItem,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 
 export const FormGrid: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -22,12 +31,7 @@ export const FormGrid: React.FunctionComponent = () => {
     <Form>
       <Grid hasGutter md={6}>
         <GridItem span={12}>
-          <FormGroup
-            label="Full name"
-            isRequired
-            fieldId="grid-form-name-01"
-            helperText="Include your middle name if you have one."
-          >
+          <FormGroup label="Full name" isRequired fieldId="grid-form-name-01">
             <TextInput
               isRequired
               type="text"
@@ -37,6 +41,11 @@ export const FormGrid: React.FunctionComponent = () => {
               value={name}
               onChange={handleNameChange}
             />
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+              </HelperText>
+            </FormHelperText>
           </FormGroup>
         </GridItem>
         <FormGroup label="Email" isRequired fieldId="grid-form-email-01">
diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
index cdbca250654..631d602157f 100644
--- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
+++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Popover } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Popover,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
@@ -45,7 +53,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
             <button
               type="button"
               aria-label="More info for name field"
-              onClick={e => e.preventDefault()}
+              onClick={(e) => e.preventDefault()}
               aria-describedby="form-group-label-info"
               className="pf-c-form__group-label-help"
             >
@@ -55,7 +63,6 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
         }
         isRequired
         fieldId="form-group-label-info"
-        helperText="Include your middle name if you have one."
       >
         <TextInput
           isRequired
@@ -66,6 +73,11 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
           value={name}
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
index 2d26f8f4e4a..a39e56322d1 100644
--- a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
+++ b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx
@@ -9,7 +9,10 @@ import {
   Checkbox,
   ActionGroup,
   Button,
-  Radio
+  Radio,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 
 export const FormHorizontal: React.FunctionComponent = () => {
@@ -46,12 +49,7 @@ export const FormHorizontal: React.FunctionComponent = () => {
 
   return (
     <Form isHorizontal>
-      <FormGroup
-        label="Full name"
-        isRequired
-        fieldId="horizontal-form-name"
-        helperText="Include your middle name if you have one."
-      >
+      <FormGroup label="Full name" isRequired fieldId="horizontal-form-name">
         <TextInput
           value={name}
           isRequired
@@ -61,6 +59,11 @@ export const FormHorizontal: React.FunctionComponent = () => {
           name="horizontal-form-name"
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
       <FormGroup label="Email" isRequired fieldId="horizontal-form-email">
         <TextInput
diff --git a/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx b/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
index f34d7b6854b..1561865e59d 100644
--- a/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
+++ b/packages/react-core/src/components/Form/examples/FormHorizontalHelper.tsx
@@ -1,23 +1,16 @@
 import React from 'react';
-import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+import { Form, FormGroup, Checkbox, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';
 
-export const FormHorizontalFormHelperText: React.FunctionComponent = () => {
-  const [helperText] = React.useState('Select all that apply:');
-
-  return (
-    <Form isHorizontal>
-      <FormGroup
-        label="Label"
-        helperText={helperText}
-        isHelperTextBeforeField
-        hasNoPaddingTop
-        isStack
-        fieldId="horizontal-form-helper-options"
-        role="group"
-      >
-        <Checkbox label="Option 1" id="option-03" />
-        <Checkbox label="Option 2" id="option-04" />
-      </FormGroup>
-    </Form>
-  );
-};
+export const FormHorizontalFormHelperText: React.FunctionComponent = () => (
+  <Form isHorizontal>
+    <FormGroup label="Label" hasNoPaddingTop isStack fieldId="horizontal-form-helper-options" role="group">
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>Select all that apply:</HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+      <Checkbox label="Option 1" id="option-03" />
+      <Checkbox label="Option 2" id="option-04" />
+    </FormGroup>
+  </Form>
+);
diff --git a/packages/react-core/src/components/Form/examples/FormInvalid.tsx b/packages/react-core/src/components/Form/examples/FormInvalid.tsx
index 15a80dd53ca..12847e1b0d4 100644
--- a/packages/react-core/src/components/Form/examples/FormInvalid.tsx
+++ b/packages/react-core/src/components/Form/examples/FormInvalid.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const FormInvalid: React.FunctionComponent = () => {
@@ -21,19 +21,7 @@ export const FormInvalid: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Age"
-        type="number"
-        helperText={
-          <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'default'}>
-            Please enter your age
-          </FormHelperText>
-        }
-        helperTextInvalid="Must be a number"
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        fieldId="age-1"
-        validated={validated}
-      >
+      <FormGroup label="Age" type="number" fieldId="age-1">
         <TextInput
           validated={validated}
           value={age}
@@ -41,6 +29,15 @@ export const FormInvalid: React.FunctionComponent = () => {
           aria-describedby="age-1-helper"
           onChange={handleAgeChange}
         />
+        {validated !== 'success' && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>
+                {validated === 'error' ? 'Must be a number' : 'Please enter your age'}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
index 9bd9da0ac30..00347c1193a 100644
--- a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
+++ b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx
@@ -1,5 +1,14 @@
 import React from 'react';
-import { Alert, Form, FormAlert, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import {
+  Alert,
+  Form,
+  FormAlert,
+  FormGroup,
+  TextInput,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const FormInvalidWithAlert: React.FunctionComponent = () => {
@@ -26,19 +35,7 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => {
           <Alert variant="danger" title="Fill out all required fields before continuing." aria-live="polite" isInline />
         </FormAlert>
       )}
-      <FormGroup
-        label="Age"
-        type="number"
-        helperText={
-          <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'default'}>
-            Please enter your age
-          </FormHelperText>
-        }
-        helperTextInvalid="Must be a number"
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        fieldId="age-2"
-        validated={validated}
-      >
+      <FormGroup label="Age" type="number" fieldId="age-2">
         <TextInput
           validated={validated}
           value={age}
@@ -46,6 +43,15 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => {
           aria-describedby="age-2-helper"
           onChange={handleAgeChange}
         />
+        {validated !== 'success' && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>
+                {validated === 'error' ? 'Must be a number' : 'Please enter your age'}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
index 087afac665b..248340ba769 100644
--- a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
+++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
@@ -1,5 +1,17 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Checkbox,
+  Popover,
+  ActionGroup,
+  Button,
+  Radio,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const FormLimitWidth: React.FunctionComponent = () => {
@@ -54,7 +66,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
             <button
               type="button"
               aria-label="More info for name field"
-              onClick={e => e.preventDefault()}
+              onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-02"
               className="pf-c-form__group-label-help"
             >
@@ -64,7 +76,6 @@ export const FormLimitWidth: React.FunctionComponent = () => {
         }
         isRequired
         fieldId="simple-form-name-02"
-        helperText="Include your middle name if you have one."
       >
         <TextInput
           isRequired
@@ -75,6 +86,11 @@ export const FormLimitWidth: React.FunctionComponent = () => {
           value={name}
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
       <FormGroup label="Email" isRequired fieldId="simple-form-email-02">
         <TextInput
diff --git a/packages/react-core/src/components/Form/examples/FormValidated.tsx b/packages/react-core/src/components/Form/examples/FormValidated.tsx
index 744cb9238bd..ac8987676d7 100644
--- a/packages/react-core/src/components/Form/examples/FormValidated.tsx
+++ b/packages/react-core/src/components/Form/examples/FormValidated.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const FormValidated: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
 
   const [age, setAge] = React.useState('Five');
-  const [invalidText, setInvalidText] = React.useState('Must be a number');
   const [validated, setValidated] = React.useState<validate>('default');
   const [helperText, setHelperText] = React.useState('Enter your age to continue');
 
@@ -29,7 +28,7 @@ export const FormValidated: React.FunctionComponent = () => {
         }
       } else {
         setValidated('error');
-        setInvalidText('Must be a number');
+        setHelperText('Must be a number');
       }
     }, 2000);
 
@@ -38,15 +37,7 @@ export const FormValidated: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Age"
-        type="number"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        fieldId="age-3"
-        validated={validated}
-      >
+      <FormGroup label="Age" type="number" fieldId="age-3">
         <TextInput
           validated={validated}
           value={age}
@@ -54,6 +45,13 @@ export const FormValidated: React.FunctionComponent = () => {
           aria-describedby="age-3-helper"
           onChange={handleAgeChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated} {...(validated === 'error' && { icon: <ExclamationCircleIcon /> })}>
+              {helperText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
index d1849db2df2..296152b29ec 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions
+} from '@patternfly/react-core';
 
 export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
   const [formSelectValue, setFormSelectValue] = React.useState('');
   const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
-  const [invalidText, setInvalidText] = React.useState('You must choose something');
   const [helperText, setHelperText] = React.useState('');
 
   const onChange = (value: string) => {
@@ -19,7 +27,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
     } else {
       setFormSelectValue(value);
       setValidated(ValidatedOptions.error);
-      setInvalidText('You must chose Three (thought that was obvious)');
+      setHelperText('You must chose Three (thought that was obvious)');
     }
   };
 
@@ -32,14 +40,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Selection:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Selection:" type="string" fieldId="selection">
         <FormSelect
           validated={validated}
           isIconSprite
@@ -51,6 +52,11 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
             <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
           ))}
         </FormSelect>
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
index ab072eebe88..84c4a19368a 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions
+} from '@patternfly/react-core';
 
 export const FormSelectValidated: React.FunctionComponent = () => {
   const [formValue, setFormValue] = React.useState('');
-  const [invalidText, setInvalidText] = React.useState('You must choose something');
   const [helperText, setHelperText] = React.useState('');
   const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
 
@@ -24,7 +32,7 @@ export const FormSelectValidated: React.FunctionComponent = () => {
         setHelperText('You must select a value');
       } else {
         setValidated(ValidatedOptions.error);
-        setInvalidText('You must chose Three (thought that was obvious)');
+        setHelperText('You must chose Three (thought that was obvious)');
       }
     });
   };
@@ -38,14 +46,7 @@ export const FormSelectValidated: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Selection:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Selection:" type="string" fieldId="selection">
         <FormSelect
           id="selection"
           validated={validated}
@@ -63,6 +64,11 @@ export const FormSelectValidated: React.FunctionComponent = () => {
             />
           ))}
         </FormSelect>
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/LoginPage/LoginForm.tsx b/packages/react-core/src/components/LoginPage/LoginForm.tsx
index fb39dd7e09b..39fd0712989 100644
--- a/packages/react-core/src/components/LoginPage/LoginForm.tsx
+++ b/packages/react-core/src/components/LoginPage/LoginForm.tsx
@@ -7,6 +7,7 @@ import { ValidatedOptions } from '../../helpers/constants';
 import { InputGroup } from '../InputGroup';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import { HelperText, HelperTextItem } from '../HelperText';
 
 export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Flag to indicate if the first dropdown item should not gain initial focus */
@@ -96,15 +97,16 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
 
   return (
     <Form className={className} {...props}>
-      <FormHelperText isError={!isValidUsername || !isValidPassword} isHidden={!showHelperText} icon={helperTextIcon}>
-        {helperText}
-      </FormHelperText>
-      <FormGroup
-        label={usernameLabel}
-        isRequired
-        validated={isValidUsername ? ValidatedOptions.default : ValidatedOptions.error}
-        fieldId="pf-login-username-id"
-      >
+      {showHelperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={!isValidUsername || !isValidPassword ? 'error' : 'default'} icon={helperTextIcon}>
+              {helperText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+      <FormGroup label={usernameLabel} isRequired fieldId="pf-login-username-id">
         <TextInput
           autoFocus={!noAutoFocus}
           id="pf-login-username-id"
@@ -116,12 +118,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           onChange={onChangeUsername}
         />
       </FormGroup>
-      <FormGroup
-        label={passwordLabel}
-        isRequired
-        validated={isValidPassword ? ValidatedOptions.default : ValidatedOptions.error}
-        fieldId="pf-login-password-id"
-      >
+      <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
             {passwordInput}
diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
index a488aab8ee0..5bd163b094c 100644
--- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
@@ -6,9 +6,6 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
     class="pf-c-form"
     novalidate=""
   >
-    <p
-      class="pf-c-form__helper-text pf-m-hidden"
-    />
     <div
       class="pf-c-form__group"
     >
@@ -150,9 +147,6 @@ exports[`LoginForm LoginForm with show password 1`] = `
     class="pf-c-form"
     novalidate=""
   >
-    <p
-      class="pf-c-form__helper-text pf-m-hidden"
-    />
     <div
       class="pf-c-form__group"
     >
@@ -294,9 +288,6 @@ exports[`LoginForm should render Login form 1`] = `
     class="pf-c-form"
     novalidate=""
   >
-    <p
-      class="pf-c-form__helper-text pf-m-hidden"
-    />
     <div
       class="pf-c-form__group"
     >
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
index 58aa1c2ee46..ce7d96cc4d8 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  const [invalidText, setInvalidText] = React.useState('You must have something to say');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
   const simulateNetworkCall = (callback: Function) => {
@@ -21,7 +20,7 @@ export const TextAreaValidated: React.FunctionComponent = () => {
           setHelperText('Thanks for your comments!');
         } else {
           setValidated('error');
-          setInvalidText("You're being too brief, please enter at least 10 characters.");
+          setHelperText("You're being too brief, please enter at least 10 characters.");
         }
       } else {
         setValidated('warning');
@@ -31,21 +30,19 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   };
   return (
     <Form>
-      <FormGroup
-        label="Comments:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Comments:" type="string" fieldId="selection">
         <TextArea
           value={value}
-          onChange={value => handleTextAreaChange(value)}
+          onChange={(value) => handleTextAreaChange(value)}
           isRequired
           validated={validated}
           aria-label="invalid text area example"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx b/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
index 9121779a59e..aeb7c2173d5 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
@@ -1,5 +1,14 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Wizard, WizardStep } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
 interface PrevStepInfo {
   prevId?: string | number;
   prevName: React.ReactNode;
@@ -26,14 +35,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -41,6 +43,13 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index 4ed39758d3d..92393f38f33 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -14,7 +14,10 @@ import {
   WizardFooter,
   WizardContextConsumer,
   Alert,
-  EmptyStateIcon
+  EmptyStateIcon,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -94,14 +97,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -109,6 +105,13 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx
index 426ea07311b..44e94433e88 100644
--- a/packages/react-core/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx
+++ b/packages/react-core/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx
@@ -40,7 +40,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
     setValue(inputValue);
   };
 
-  const filterValidations = () => Object.keys(inputValidation).filter(item => inputValidation[item] !== 'success');
+  const filterValidations = () => Object.keys(inputValidation).filter((item) => inputValidation[item] !== 'success');
 
   return (
     <Form>
@@ -55,7 +55,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
           aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText component="ul">
             <HelperTextItem component="li" id="ruleLength" isDynamic variant={ruleLength as any}>
               Must be at least 5 characters in length
diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx
index 35b514b6e71..3d8283834ac 100644
--- a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx
+++ b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx
@@ -32,7 +32,7 @@ export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () =>
           aria-invalid={inputValidation === 'error'}
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText id="helper-text2" aria-live="polite">
             {inputValidation !== 'success' && (
               <HelperTextItem variant={inputValidation as any} hasIcon={inputValidation === 'error'}>
diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx
index 85175317001..efd75d31612 100644
--- a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx
+++ b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx
@@ -19,7 +19,7 @@ export const HelperTextStaticVariantStaticText: React.FunctionComponent = () =>
           aria-describedby="helper-text1"
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText id="helper-text1">
             <HelperTextItem variant={'default'}>Enter your middle name or your middle initial</HelperTextItem>
           </HelperText>
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardEnabledOnFormValidation.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
index 2a8044dbff1..9e24c68e8c4 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardEnabledOnFormValidation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import { Wizard, WizardStep } from '@patternfly/react-core/next';
 
 interface SampleFormProps {
@@ -22,14 +22,7 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -37,6 +30,13 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index 7c494206c2b..037a9d8ecae 100644
--- a/packages/react-core/src/next/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/next/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -12,7 +12,10 @@ import {
   Progress,
   Form,
   FormGroup,
-  TextInput
+  TextInput,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 import { Wizard, WizardStep, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core/next';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
@@ -118,14 +121,7 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -133,6 +129,13 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
diff --git a/packages/react-integration/cypress/integration/form.spec.ts b/packages/react-integration/cypress/integration/form.spec.ts
index 1dc5332fe6b..0f3376a4b3e 100644
--- a/packages/react-integration/cypress/integration/form.spec.ts
+++ b/packages/react-integration/cypress/integration/form.spec.ts
@@ -20,7 +20,7 @@ describe('Form Demo Test', () => {
       .first()
       .clear()
       .type('5');
-    cy.get('.pf-c-form__helper-text').contains('Please write your age');
+    cy.get('.pf-c-helper-text').contains('Please write your age');
   });
 
   it('Verify form identifies input error', () => {
@@ -28,7 +28,7 @@ describe('Form Demo Test', () => {
       .first()
       .clear()
       .type('Something');
-    cy.get('.pf-c-form__helper-text').contains('Age has to be a number');
+    cy.get('.pf-c-helper-text').contains('Age has to be a number');
   });
 
   it('Verify section titles rendering with correct component', () => {
@@ -37,28 +37,28 @@ describe('Form Demo Test', () => {
 
   it('Verify form validates form group', () => {
     cy.get('#age-validated.pf-m-success').should('not.exist');
-    cy.get('.pf-c-form__helper-text').contains('Enter age');
+    cy.get('.pf-c-helper-text').contains('Enter age');
     // type string that is not a number so it is invalid
     cy.get('#age-validated').type('hi');
     cy.get('#age-validated').should('have.value', 'hi');
     cy.get('#age-validated').then(textinput => {
       expect(textinput.attr('aria-invalid')).to.be.equal('true');
     });
-    cy.get('.pf-c-form__helper-text.pf-m-error').contains('Age must be a number');
-    cy.get('#age2-helper.pf-m-error').should('exist');
+    cy.get('.pf-c-helper-text__item.pf-m-error').contains('Age must be a number');
+    cy.get('#age2-helper .pf-m-error').should('exist');
     // Clear text input and enter valid number
     cy.get('#age-validated')
       .clear()
       .type('34')
       .should('have.value', '34');
-    cy.get('#age2-helper.pf-m-success').should('exist');
+    cy.get('#age2-helper .pf-m-success').should('exist');
     cy.get('#age-validated.pf-m-success').should('exist');
-    cy.get('.pf-c-form__helper-text.pf-m-success').contains('Enter age');
+    cy.get('.pf-c-helper-text__item.pf-m-success').contains('Enter age');
     cy.get('#age-validated').then(textinput => {
       expect(textinput.attr('aria-invalid')).to.be.equal('false');
     });
     cy.get('#age-validated').clear();
-    cy.get('#age2-helper.pf-m-warning').should('exist');
+    cy.get('#age2-helper .pf-m-warning').should('exist');
     cy.get('#age-validated').then(textinput => {
       expect(textinput.attr('aria-invalid')).to.be.equal('false');
     });
diff --git a/packages/react-integration/cypress/integration/login-page.spec.ts b/packages/react-integration/cypress/integration/login-page.spec.ts
index ea4e5e2e4a9..60aec8a771b 100644
--- a/packages/react-integration/cypress/integration/login-page.spec.ts
+++ b/packages/react-integration/cypress/integration/login-page.spec.ts
@@ -7,7 +7,7 @@ describe('Login Page Demo Test', () => {
     cy.get('input[name="pf-login-username-id"]').then(userNameInput => expect(userNameInput.text()).to.equal(''));
     cy.get('input[name="pf-login-password-id"]').then(passwordInput => expect(passwordInput.text()).to.equal(''));
     cy.get('#pf-login-remember-me-id').then(rememberMeBox => expect(rememberMeBox.is(':checked')).to.be.false);
-    cy.get('.pf-c-form__helper-text.pf-m-error').should('not.exist');
+    cy.get('.pf-c-form__helper-text .pf-m-error').should('not.exist');
     cy.get('.pf-c-login__main-footer-links')
       .find('.pf-c-login__main-footer-links-item')
       .then(links => expect(links.length).to.equal(5));
@@ -16,7 +16,7 @@ describe('Login Page Demo Test', () => {
   it('Verify error is shown on invalid credentials', () => {
     cy.get('.pf-c-login__main-body .pf-c-button.pf-m-primary').then((loginButton: JQuery<HTMLButtonElement>) => {
       cy.wrap(loginButton).click();
-      cy.get('.pf-c-form__helper-text.pf-m-error').then(errorMessage => {
+      cy.get('.pf-c-form__helper-text .pf-m-error').then(errorMessage => {
         expect(errorMessage.length).to.equal(1);
       });
       cy.get('input[name="pf-login-username-id"][aria-invalid="true"]').then(userNameInput => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
index aeee9a57113..6cfb03ca88f 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
@@ -12,7 +12,10 @@ import {
   SelectOption,
   SelectOptionObject,
   SelectVariant,
-  ValidatedOptions
+  ValidatedOptions,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -63,13 +66,13 @@ export class FormDemo extends Component<FormProps, FormState> {
     const { selected } = this.state;
     if (selected.includes(selection.toString())) {
       this.setState(
-        prevState => ({ selected: prevState.selected.filter(item => item !== selection) }),
+        (prevState) => ({ selected: prevState.selected.filter((item) => item !== selection) }),
         // eslint-disable-next-line no-console
         () => console.log('selections: ', this.state.selected)
       );
     } else {
       this.setState(
-        prevState => ({ selected: [...prevState.selected, selection.toString()] }),
+        (prevState) => ({ selected: [...prevState.selected, selection.toString()] }),
         // eslint-disable-next-line no-console
         () => console.log('selections: ', this.state.selected)
       );
@@ -124,7 +127,7 @@ export class FormDemo extends Component<FormProps, FormState> {
                 <button
                   id="helper-text-target"
                   aria-label="More info for name field"
-                  onClick={e => e.preventDefault()}
+                  onClick={(e) => e.preventDefault()}
                   aria-describedby="simple-form-name"
                   className="pf-c-form__group-label-help"
                 >
@@ -133,11 +136,7 @@ export class FormDemo extends Component<FormProps, FormState> {
               </Popover>
             }
             type="number"
-            helperText="Please write your age"
-            helperTextInvalid="Age has to be a number"
-            helperTextInvalidIcon={<ExclamationCircleIcon />}
             fieldId="age"
-            validated={isValid ? ValidatedOptions.default : ValidatedOptions.error}
           >
             <TextInput
               validated={isValid ? ValidatedOptions.default : ValidatedOptions.error}
@@ -146,6 +145,14 @@ export class FormDemo extends Component<FormProps, FormState> {
               aria-describedby="age-helper"
               onChange={this.handleTextInputChange}
             />
+            <HelperText id="age-helper">
+              <HelperTextItem
+                icon={<ExclamationCircleIcon />}
+                variant={isValid ? ValidatedOptions.default : ValidatedOptions.error}
+              >
+                {isValid ? 'Please write your age' : 'Age has to be a number'}
+              </HelperTextItem>
+            </HelperText>
           </FormGroup>
         </Form>
 
@@ -173,15 +180,7 @@ export class FormDemo extends Component<FormProps, FormState> {
             </Select>
           </FormGroup>
           <FormSection title="Title" titleElement="h4">
-            <FormGroup
-              id="formgroup-validated"
-              label="Validated Age"
-              type="number"
-              helperText="Enter age"
-              helperTextInvalid="Age must be a number"
-              fieldId="age2"
-              validated={validated}
-            >
+            <FormGroup id="formgroup-validated" label="Validated Age" type="number" fieldId="age2">
               <TextInput
                 validated={validated}
                 value={validatedValue}
@@ -189,6 +188,13 @@ export class FormDemo extends Component<FormProps, FormState> {
                 aria-describedby="age-helper-validated"
                 onChange={this.handleValidatedTextInputChange}
               />
+              <FormHelperText>
+                <HelperText id="age2-helper">
+                  <HelperTextItem variant={validated}>
+                    {validated === 'error' ? 'Age must be a number' : 'Enter age'}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
             </FormGroup>
           </FormSection>
           <FormSection>