diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 9a48727a1ba..ed5bb0f3dee 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.53",
+    "@patternfly/patternfly": "5.0.0-alpha.54",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
index d772fdd298a..893190da9ef 100644
--- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
@@ -131,7 +131,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       expanded: !prevState.expanded
     }));
   };
@@ -183,7 +183,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       >
         {variant === 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 {!isCode && (
                   <span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
@@ -223,7 +223,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
         )}
         {variant !== 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 <div className={css(styles.clipboardCopyGroup)}>
                   {variant === 'expansion' && (
@@ -237,7 +237,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     />
                   )}
                   <TextInput
-                    isReadOnly={isReadOnly || this.state.expanded}
+                    readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap
index 2f5088a3ab5..64d8506a7de 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap
@@ -10,17 +10,20 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-clipboard-copy__group"
     >
-      <input
-        aria-invalid="false"
-        aria-label="'Copyable input'"
+      <div
         class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        id="text-input-0"
-        type="text"
-        value="[object Object]"
-      />
+      >
+        <input
+          aria-invalid="false"
+          aria-label="'Copyable input'"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          id="text-input-0"
+          type="text"
+          value="[object Object]"
+        />
+      </div>
       <button
         aria-disabled="false"
         aria-label="'Copy to clipboard'"
diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index 735e0f44695..b2d58702a2f 100644
--- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -15,17 +15,20 @@ exports[`With popover opened 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Date picker"
+          <div
             class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            placeholder="YYYY-MM-DD"
-            type="text"
-            value=""
-          />
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -153,16 +156,19 @@ exports[`With popover opened 1`] = `
                   <div
                     class="pf-v5-c-calendar-month__header-year"
                   >
-                    <input
-                      aria-invalid="false"
-                      aria-label="Select year"
+                    <div
                       class="pf-v5-c-form-control"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                      data-ouia-component-type="PF4/TextInput"
-                      data-ouia-safe="true"
-                      type="number"
-                      value="1969"
-                    />
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="Select year"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-type="PF4/TextInput"
+                        data-ouia-safe="true"
+                        type="number"
+                        value="1969"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -772,18 +778,21 @@ exports[`disabled date picker 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="disabled date picker"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            disabled=""
-            placeholder="YYYY-MM-DD"
-            type="text"
-            value="2020-11-20"
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-disabled"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="disabled date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              disabled=""
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value="2020-11-20"
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
diff --git a/packages/react-core/src/components/FileUpload/FileUploadField.tsx b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
index 13e673b9fd1..24dbd13ae9d 100644
--- a/packages/react-core/src/components/FileUpload/FileUploadField.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
@@ -132,7 +132,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
         <InputGroup>
           <InputGroupItem isFill>
             <TextInput
-              isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
               name={`${id}-filename`}
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index 820d283acf9..ecc1f81c260 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -15,21 +15,24 @@ exports[`simple fileupload 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-describedby="simple-text-file-browse-button"
-            aria-invalid="false"
-            aria-label="Drag a file here or browse to upload"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="simple-text-file-filename"
-            name="simple-text-file-filename"
-            placeholder="Drag a file here or browse to upload"
-            readonly=""
-            type="text"
-            value=""
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          >
+            <input
+              aria-describedby="simple-text-file-browse-button"
+              aria-invalid="false"
+              aria-label="Drag a file here or browse to upload"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              id="simple-text-file-filename"
+              name="simple-text-file-filename"
+              placeholder="Drag a file here or browse to upload"
+              readonly=""
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -66,14 +69,17 @@ exports[`simple fileupload 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <textarea
-        aria-invalid="false"
-        aria-label="File upload"
+      <div
         class="pf-v5-c-form-control pf-m-resize-vertical"
-        id="simple-text-file"
-        name="simple-text-file"
-        placeholder=""
-      />
+      >
+        <textarea
+          aria-invalid="false"
+          aria-label="File upload"
+          id="simple-text-file"
+          name="simple-text-file"
+          placeholder=""
+        />
+      </div>
     </div>
     <input
       style="display: none;"
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
index da245dd44d1..d9a6178eab9 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
@@ -14,21 +14,24 @@ exports[`simple fileuploadfield 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-describedby="custom-file-upload-browse-button"
-            aria-invalid="false"
-            aria-label="Do something custom with this!"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="custom-file-upload-filename"
-            name="custom-file-upload-filename"
-            placeholder="Do something custom with this!"
-            readonly=""
-            type="text"
-            value=""
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          >
+            <input
+              aria-describedby="custom-file-upload-browse-button"
+              aria-invalid="false"
+              aria-label="Do something custom with this!"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              id="custom-file-upload-filename"
+              name="custom-file-upload-filename"
+              placeholder="Do something custom with this!"
+              readonly=""
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -64,14 +67,17 @@ exports[`simple fileuploadfield 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <textarea
-        aria-invalid="false"
-        aria-label="File upload"
+      <div
         class="pf-v5-c-form-control pf-m-resize-vertical"
-        id="custom-file-upload"
-        name="custom-file-upload"
-        placeholder=""
-      />
+      >
+        <textarea
+          aria-invalid="false"
+          aria-label="File upload"
+          id="custom-file-upload"
+          name="custom-file-upload"
+          placeholder=""
+        />
+      </div>
     </div>
     <p>
       A custom preview of the uploaded file can be passed as children
diff --git a/packages/react-core/src/components/FormControl/FormControlIcon.tsx b/packages/react-core/src/components/FormControl/FormControlIcon.tsx
new file mode 100644
index 00000000000..ecb19beba4e
--- /dev/null
+++ b/packages/react-core/src/components/FormControl/FormControlIcon.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
+import { css } from '@patternfly/react-styles';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+export const statusIcons = {
+  success: CheckCircleIcon,
+  error: ExclamationCircleIcon,
+  warning: ExclamationTriangleIcon
+};
+
+export interface FormControlIconProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional class names added to the text input icon wrapper. */
+  className?: string;
+  /** A custom icon to render instead of a status icon. */
+  customIcon?: React.ReactNode;
+  /** The status icon to render. */
+  status?: 'success' | 'error' | 'warning';
+}
+
+export const FormControlIcon = ({ status, customIcon, className, ...props }: FormControlIconProps) => {
+  const StatusIcon = status && statusIcons[status];
+
+  return (
+    <div className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
+      {customIcon || <StatusIcon />}
+    </div>
+  );
+};
diff --git a/packages/react-core/src/components/FormSelect/FormSelect.tsx b/packages/react-core/src/components/FormSelect/FormSelect.tsx
index 5dd859f2878..65ec59edea7 100644
--- a/packages/react-core/src/components/FormSelect/FormSelect.tsx
+++ b/packages/react-core/src/components/FormSelect/FormSelect.tsx
@@ -3,7 +3,9 @@ import styles from '@patternfly/react-styles/css/components/FormControl/form-con
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { ValidatedOptions } from '../../helpers/constants';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface FormSelectProps
   extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>,
@@ -23,8 +25,6 @@ export interface FormSelectProps
   isDisabled?: boolean;
   /** Sets the FormSelect required. */
   isRequired?: boolean;
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
   /** Optional callback for updating when selection loses focus */
   onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;
   /** Optional callback for updating when selection gets focus */
@@ -58,7 +58,6 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     validated: 'default',
     isDisabled: false,
     isRequired: false,
-    isIconSprite: false,
     onBlur: (): any => undefined,
     onFocus: (): any => undefined,
     onChange: (): any => undefined,
@@ -70,31 +69,38 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
   };
 
   render() {
-    const { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe, ...props } =
-      this.props;
+    const { children, className, value, validated, isDisabled, isRequired, ouiaId, ouiaSafe, ...props } = this.props;
     /* find selected option and get placeholder flag */
     const selectedOption = React.Children.toArray(children).find((option: any) => option.props.value === value) as any;
     const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+
     return (
-      <select
-        {...props}
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
-          className,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning,
-          isSelectedPlaceholder && styles.modifiers.placeholder
+          isDisabled && styles.modifiers.disabled,
+          isSelectedPlaceholder && styles.modifiers.placeholder,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+          className
         )}
-        aria-invalid={validated === ValidatedOptions.error}
-        {...getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        onChange={this.handleChange}
-        disabled={isDisabled}
-        required={isRequired}
-        value={value}
       >
-        {children}
-      </select>
+        <select
+          {...props}
+          aria-invalid={validated === ValidatedOptions.error}
+          {...getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+          onChange={this.handleChange}
+          disabled={isDisabled}
+          required={isRequired}
+          value={value}
+        >
+          {children}
+        </select>
+        <div className={css(styles.formControlUtilities)}>
+          {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+          <FormControlIcon customIcon={<CaretDownIcon />} />
+        </div>
+      </div>
     );
   }
 }
diff --git a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
index 376c55dc60f..fec53d588fc 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
+++ b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
@@ -147,7 +147,7 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect).toHaveClass('pf-m-success');
+    expect(formSelect.parentElement).toHaveClass('pf-m-success');
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -160,7 +160,7 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect).toHaveClass('pf-m-warning');
+    expect(formSelect.parentElement).toHaveClass('pf-m-warning');
     expect(asFragment()).toMatchSnapshot();
   });
 
diff --git a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
index d7975aae414..0cc385948ad 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
+++ b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
@@ -2,265 +2,508 @@
 
 exports[`FormSelect Disabled FormSelect input  1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="disabled FormSelect"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-    disabled=""
+  <div
+    class="pf-v5-c-form-control pf-m-disabled"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="disabled FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+      disabled=""
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="label"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="label"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Mr
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="label"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-    id="id"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="label"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+      id="id"
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Mr
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Grouped FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="grouped FormSelect"
+  <div
+    class="pf-v5-c-form-control"
+  >
+    <select
+      aria-invalid="false"
+      aria-label="grouped FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <optgroup
+        class=""
+        label="Group1"
+      >
+        <option
+          class=""
+          value="1"
+        >
+          The First Option
+        </option>
+        <option
+          class=""
+          value="2"
+        >
+          Second option is selected by default
+        </option>
+      </optgroup>
+      <optgroup
+        class=""
+        label="Group2"
+      >
+        <option
+          class=""
+          value="3"
+        >
+          The Third Option
+        </option>
+        <option
+          class=""
+          value="4"
+        >
+          The Fourth option
+        </option>
+      </optgroup>
+      <optgroup
+        class=""
+        disabled=""
+        label="Group3"
+      >
+        <option
+          class=""
+          value="5"
+        >
+          The Fifth Option
+        </option>
+        <option
+          class=""
+          value="6"
+        >
+          The Sixth option
+        </option>
+      </optgroup>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormSelect Simple FormSelect input 1`] = `
+<DocumentFragment>
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <optgroup
-      class=""
-      label="Group1"
+    <select
+      aria-invalid="false"
+      aria-label="simple FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
     >
       <option
         class=""
-        value="1"
+        disabled=""
+        value="please choose"
       >
-        The First Option
+        Please Choose
       </option>
       <option
         class=""
-        value="2"
+        value="mr"
       >
-        Second option is selected by default
+        Mr
       </option>
-    </optgroup>
-    <optgroup
-      class=""
-      label="Group2"
-    >
       <option
         class=""
-        value="3"
+        value="miss"
       >
-        The Third Option
+        Miss
       </option>
       <option
         class=""
-        value="4"
+        value="mrs"
       >
-        The Fourth option
+        Mrs
       </option>
-    </optgroup>
-    <optgroup
-      class=""
-      disabled=""
-      label="Group3"
-    >
       <option
         class=""
-        value="5"
+        value="ms"
       >
-        The Fifth Option
+        Ms
       </option>
       <option
         class=""
-        value="6"
+        value="dr"
       >
-        The Sixth option
+        Dr
       </option>
-    </optgroup>
-  </select>
-</DocumentFragment>
-`;
-
-exports[`FormSelect Simple FormSelect input 1`] = `
-<DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="simple FormSelect"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      disabled=""
-      value="please choose"
-    >
-      Please Choose
-    </option>
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-    <option
-      class=""
-      value="miss"
-    >
-      Miss
-    </option>
-    <option
-      class=""
-      value="mrs"
-    >
-      Mrs
-    </option>
-    <option
-      class=""
-      value="ms"
-    >
-      Ms
-    </option>
-    <option
-      class=""
-      value="dr"
-    >
-      Dr
-    </option>
-    <option
-      class=""
-      disabled=""
-      value="other"
+      <option
+        class=""
+        disabled=""
+        value="other"
+      >
+        Other
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Other
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect invalid FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="true"
-    aria-label="invalid FormSelect"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
+  <div
+    class="pf-v5-c-form-control pf-m-error"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="true"
+      aria-label="invalid FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <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>
+      </div>
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated success FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="validated FormSelect"
+  <div
     class="pf-v5-c-form-control pf-m-success"
-    data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="validated FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+          />
+        </svg>
+      </div>
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated warning FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="validated FormSelect"
+  <div
     class="pf-v5-c-form-control pf-m-warning"
-    data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="validated FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Mr
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 576 512"
+        >
+          <path
+            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
+      </div>
+      <div
+        class="pf-v5-c-form-control__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelect.md b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
index ec781e7f563..85a4c90d09c 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelect.md
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelect.md
@@ -10,24 +10,25 @@ ouia: true
 ## Examples
 
 ### Basic
+
 ```ts file='./FormSelectBasic.tsx'
+
 ```
 
 ### Validated
+
 ```ts file='./FormSelectValidated.tsx'
+
 ```
 
 ### Disabled
+
 ```ts file='./FormSelectDisabled.tsx'
-```
 
-### Grouped
-```ts file='./FormSelectGrouped.tsx'
 ```
 
-### Icon sprite variant
+### Grouped
 
-**Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+```ts file='./FormSelectGrouped.tsx'
 
-```ts file='./FormSelectIconSpriteVariant.tsx'
 ```
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
deleted file mode 100644
index dd9a89e8dc8..00000000000
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-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 [helperText, setHelperText] = React.useState('');
-
-  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
-    if (value === '3') {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.success);
-      setHelperText('You chose wisely');
-    } else if (value === '') {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.warning);
-      setHelperText('You must select a value');
-    } else {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.error);
-      setHelperText('You must chose Three (thought that was obvious)');
-    }
-  };
-
-  const options = [
-    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
-    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
-  ];
-
-  return (
-    <Form>
-      <FormGroup label="Selection:" type="string" fieldId="selection">
-        <FormSelect
-          validated={validated}
-          isIconSprite
-          value={formSelectValue}
-          onChange={onChange}
-          aria-label="FormSelect Input"
-        >
-          {options.map((option, index) => (
-            <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/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
index 92062845ebd..61d31581100 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
@@ -33,18 +33,21 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -74,18 +77,21 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-password-id"
-          name="pf-login-password-id"
-          required=""
-          type="password"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-password-id"
+            name="pf-login-password-id"
+            required=""
+            type="password"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -174,18 +180,21 @@ exports[`LoginForm LoginForm with show password 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -221,18 +230,21 @@ exports[`LoginForm LoginForm with show password 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <input
-              aria-invalid="false"
+            <div
               class="pf-v5-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              id="pf-login-password-id"
-              name="pf-login-password-id"
-              required=""
-              type="password"
-              value=""
-            />
+            >
+              <input
+                aria-invalid="false"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+                data-ouia-component-type="PF4/TextInput"
+                data-ouia-safe="true"
+                id="pf-login-password-id"
+                name="pf-login-password-id"
+                required=""
+                type="password"
+                value=""
+              />
+            </div>
           </div>
           <div
             class="pf-v5-c-input-group__item"
@@ -321,18 +333,21 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -362,18 +377,21 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-password-id"
-          name="pf-login-password-id"
-          required=""
-          type="password"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-password-id"
+            name="pf-login-password-id"
+            required=""
+            type="password"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
index a2ba84280af..357aaef2626 100644
--- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
+++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
@@ -41,17 +41,19 @@ exports[`numberInput disables lower threshold 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -127,17 +129,19 @@ exports[`numberInput disables upper threshold 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-8"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="100"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="100"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -215,17 +219,19 @@ exports[`numberInput passes button props successfully 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-13"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-13"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -302,17 +308,20 @@ exports[`numberInput passes input props successfully 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          name="test-name"
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            name="test-name"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -389,17 +398,19 @@ exports[`numberInput renders custom width 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -476,17 +487,19 @@ exports[`numberInput renders defaults & extra props 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -563,18 +576,20 @@ exports[`numberInput renders disabled 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          readonly=""
-          type="number"
-          value="90"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-disabled"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            type="number"
+            value="90"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -651,17 +666,38 @@ exports[`numberInput renders error validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="true"
-          aria-label="Input"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-error"
+        >
+          <input
+            aria-invalid="true"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <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>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -737,17 +773,38 @@ exports[`numberInput renders success validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control pf-m-success"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -828,17 +885,19 @@ exports[`numberInput renders unit & position 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -914,17 +973,19 @@ exports[`numberInput renders unit 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1005,17 +1066,19 @@ exports[`numberInput renders value 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="90"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="90"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1091,17 +1154,38 @@ exports[`numberInput renders warning validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control pf-m-warning"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 576 512"
+              >
+                <path
+                  d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index ed7832d31a4..d0dafad0a86 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -290,16 +290,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="username_0"
-                    type="text"
-                    value="player"
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="username_0"
+                      type="text"
+                      value="player"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -323,16 +326,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="firstname_1"
-                    type="text"
-                    value="john"
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="firstname_1"
+                      type="text"
+                      value="john"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -356,16 +362,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="pf-random-id-2"
-                    type="text"
-                    value=""
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="pf-random-id-2"
+                      type="text"
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
               <div
diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 1f22738ed89..4b8472ac1f3 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -318,7 +318,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const displayInput = () => {
     const textInput = (
       <TextInput
-        className={css(styles.formControl)}
         isDisabled={isDisabled}
         type="number"
         value={localInputValue}
diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
index ed9c1f152c2..9f05e7f0b7a 100644
--- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
@@ -56,16 +56,19 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -247,16 +250,19 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -416,16 +422,19 @@ exports[`slider renders slider with input 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item pf-m-box"
@@ -492,16 +501,19 @@ exports[`slider renders slider with input above thumb 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Slider value input"
-              class="pf-v5-c-form-control pf-v5-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              type="number"
-              value="50"
-            />
+            <div
+              class="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid="false"
+                aria-label="Slider value input"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-type="PF4/TextInput"
+                data-ouia-safe="true"
+                type="number"
+                value="50"
+              />
+            </div>
           </div>
           <div
             class="pf-v5-c-input-group__item pf-m-box"
diff --git a/packages/react-core/src/components/TextArea/TextArea.tsx b/packages/react-core/src/components/TextArea/TextArea.tsx
index b53e69ade31..f103d3625d8 100644
--- a/packages/react-core/src/components/TextArea/TextArea.tsx
+++ b/packages/react-core/src/components/TextArea/TextArea.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import heightToken from '@patternfly/react-tokens/dist/esm/c_form_control_textarea_Height';
 import { css } from '@patternfly/react-styles';
 import { capitalize, ValidatedOptions, canUseDOM } from '../../helpers';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
@@ -23,12 +23,8 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   isRequired?: boolean;
   /** Flag to show if the text area is disabled. */
   isDisabled?: boolean;
-  /** @deprecated Use readOnlyVariant instead. Flag to show if the text area is read only. */
-  isReadOnly?: boolean;
   /** Read only variant. */
   readOnlyVariant?: 'default' | 'plain';
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
   /** Flag to modify height based on contents. */
   autoResize?: boolean;
   /** Value to indicate if the text area is modified to show that validation state.
@@ -55,7 +51,6 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     className: '',
     isRequired: false,
     isDisabled: false,
-    isIconSprite: false,
     validated: 'default',
     resizeOrientation: 'both',
     'aria-label': null as string
@@ -64,7 +59,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
   inputRef = React.createRef<HTMLTextAreaElement>();
 
   private setAutoHeight = (field: HTMLTextAreaElement) => {
-    field.style.setProperty(heightToken.name, 'inherit');
+    const parent = field.parentElement;
+    parent.style.setProperty('height', 'inherit');
     const computed = window.getComputedStyle(field);
     // Calculate the height
     const height =
@@ -73,7 +69,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       field.scrollHeight +
       parseInt(computed.getPropertyValue('padding-bottom')) +
       parseInt(computed.getPropertyValue('border-bottom-width'));
-    field.style.setProperty(heightToken.name, `${height}px`);
+    parent.style.setProperty('height', `${height}px`);
   };
 
   constructor(props: TextAreaProps) {
@@ -110,8 +106,6 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       validated,
       isRequired,
       isDisabled,
-      isIconSprite,
-      isReadOnly,
       readOnlyVariant,
       resizeOrientation,
       innerRef,
@@ -122,27 +116,40 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal';
+    const orientation = `resize${capitalize(resizeOrientation)}` as
+      | 'resizeVertical'
+      | 'resizeHorizontal'
+      | 'resizeBoth';
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+
     return (
-      <textarea
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          className,
-          resizeOrientation !== TextAreResizeOrientation.both && styles.modifiers[orientation],
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning
+          resizeOrientation && styles.modifiers[orientation],
+          isDisabled && styles.modifiers.disabled,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+          className
+        )}
+      >
+        <textarea
+          onChange={this.handleChange}
+          {...(typeof this.props.defaultValue !== 'string' && { value })}
+          aria-invalid={validated === ValidatedOptions.error}
+          required={isRequired}
+          disabled={isDisabled || disabled}
+          readOnly={!!readOnlyVariant}
+          ref={innerRef || this.inputRef}
+          {...props}
+        />
+        {hasStatusIcon && (
+          <div className={css(styles.formControlUtilities)}>
+            <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />
+          </div>
         )}
-        onChange={this.handleChange}
-        {...(typeof this.props.defaultValue !== 'string' && { value })}
-        aria-invalid={validated === ValidatedOptions.error}
-        required={isRequired}
-        disabled={isDisabled || disabled}
-        readOnly={!!readOnlyVariant || isReadOnly}
-        ref={innerRef || this.inputRef}
-        {...props}
-      />
+      </div>
     );
   }
 }
diff --git a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
index bd5c2389af3..03c828a0731 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -32,7 +32,7 @@ test('Renders simple text input', () => {
 test('Renders with custom class passed', () => {
   render(<TextArea aria-label="custom class textarea" className="test-class" />);
 
-  expect(screen.getByRole('textbox')).toHaveClass('test-class');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('test-class');
 });
 
 test('Renders text area with required attribute using isRequired', () => {
@@ -69,17 +69,17 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-v5-c-form-control', { exact: true });
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-v5-c-form-control');
 });
 
 test('Renders validated text area with success className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-success');
 });
 
 test('Renders validated text area with warning className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-warning');
 });
 
 test('Renders invalid text area', () => {
@@ -94,12 +94,12 @@ test('Text area is not invalid by default', () => {
 
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
 });
 
 test('Renders horizontally resizable text area', () => {
   render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
 test('Throws console error when no aria-label or id is given', () => {
diff --git a/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap b/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
index 199b34a8526..ac1a3713b4e 100644
--- a/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
+++ b/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
@@ -2,13 +2,16 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="test textarea"
-    class="pf-v5-c-form-control custom class"
-    disabled=""
-    required=""
-    style="--pf-v5-c-form-control--textarea--Height: 6px;"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-resize-both pf-m-disabled custom class"
+    style="height: 6px;"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-label="test textarea"
+      disabled=""
+      required=""
+    />
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md
index 350edf05dfa..a4b0b80ab8d 100644
--- a/packages/react-core/src/components/TextArea/examples/TextArea.md
+++ b/packages/react-core/src/components/TextArea/examples/TextArea.md
@@ -11,51 +11,53 @@ propComponents: ['TextArea']
 ### Basic
 
 ```ts file="./TextAreaBasic.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./TextAreaInvalid.tsx"
+
 ```
 
 ### Validated
 
 ```ts file="./TextAreaValidated.tsx"
+
 ```
 
 ### Vertically resizable
 
 ```ts file="./TextAreaVerticallyResizable.tsx"
+
 ```
 
 ### Horizontally resizable
 
 ```ts file="./TextAreaHorizontallyResizable.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="./TextAreaUncontrolled.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextAreaDisabled.tsx"
+
 ```
 
 ### Read only
 
 ```ts file="./TextAreaReadOnly.tsx"
+
 ```
 
 ### Auto resizing
 
 ```ts file="./TextAreaAutoResizing.tsx"
-```
-
-### Icon sprite variants
-
-**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts file="./TextAreaIconSprite.tsx"
 ```
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
deleted file mode 100644
index 728a181662b..00000000000
--- a/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-export const TextAreaIconSprite: React.FunctionComponent = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={'success'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setSuccess(value)}
-        value={success}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={'warning'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setWarning(value)}
-        value={warning}
-        aria-label="warning icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={'error'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setError(value)}
-        value={error}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};
diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx
index 8df0e0200fe..9286c7c5271 100644
--- a/packages/react-core/src/components/TextInput/TextInput.tsx
+++ b/packages/react-core/src/components/TextInput/TextInput.tsx
@@ -5,6 +5,7 @@ import { ValidatedOptions } from '../../helpers/constants';
 import { trimLeft } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 
 export enum TextInputTypes {
   text = 'text',
@@ -25,7 +26,6 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
-
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -33,10 +33,11 @@ export interface TextInputProps
   className?: string;
   /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** @deprecated Use readOnlyVariant instead. Flag to show if the text input is read only. */
-  isReadOnly?: boolean;
-  /** Read only variant. */
+  /** Flag to apply expanded styling */
+  isExpanded?: boolean;
+  /** Sets the input as readonly and determines the readonly styling. */
   readOnlyVariant?: 'plain' | 'default';
+  /** Flag indicating whether the input is required */
   isRequired?: boolean;
   /** Value to indicate if the text input is modified to show that validation state.
    * If set to success, text input will be modified to indicate valid state.
@@ -60,6 +61,8 @@ export interface TextInputProps
     | 'url';
   /** Value of the text input. */
   value?: string | number;
+  /** Placeholder of the text input when there is no value */
+  placeholder?: string;
   /** Aria-label. The text input requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text input box. */
@@ -70,14 +73,8 @@ export interface TextInputProps
   onFocus?: (event?: any) => void;
   /** Callback function when text input is blurred (focus leaves) */
   onBlur?: (event?: any) => void;
-  /** icon variant */
-  iconVariant?: 'calendar' | 'clock' | 'search';
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
-  /** Custom icon url to set as the text input's background-image */
-  customIconUrl?: string;
-  /** Dimensions for the custom icon set as the text input's background-size */
-  customIconDimensions?: string;
+  /** Custom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon. */
+  customIcon?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -92,12 +89,10 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   static displayName = 'TextInputBase';
   static defaultProps: TextInputProps = {
     'aria-label': null,
-    className: '',
     isRequired: false,
     validated: 'default' as 'success' | 'warning' | 'error' | 'default',
     isDisabled: false,
-    isReadOnly: false,
-    isIconSprite: false,
+    isExpanded: false,
     type: TextInputTypes.text,
     isLeftTruncated: false,
     onChange: (): any => undefined,
@@ -174,60 +169,61 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       className,
       type,
       value,
+      placeholder,
       validated,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       onChange,
       onFocus,
       onBlur,
       isLeftTruncated,
-      isReadOnly,
+      isExpanded,
       readOnly,
       readOnlyVariant,
       isRequired,
       isDisabled,
-      isIconSprite,
-      iconVariant,
-      customIconUrl,
-      customIconDimensions,
+      customIcon,
       ouiaId,
       ouiaSafe,
       ...props
     } = this.props;
 
-    const customIconStyle = {} as any;
-    if (customIconUrl) {
-      customIconStyle.backgroundImage = `url('${customIconUrl}')`;
-    }
-    if (customIconDimensions) {
-      customIconStyle.backgroundSize = customIconDimensions;
-    }
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <input
-        {...props}
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning,
-          ((iconVariant && iconVariant !== 'search') || customIconUrl) && styles.modifiers.icon,
-          iconVariant && styles.modifiers[iconVariant],
+          isDisabled && styles.modifiers.disabled,
+          isExpanded && styles.modifiers.expanded,
+          customIcon && styles.modifiers.icon,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
         )}
-        onChange={this.handleChange}
-        type={type}
-        value={this.sanitizeInputValue(value)}
-        aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
-        required={isRequired}
-        disabled={isDisabled}
-        readOnly={!!readOnlyVariant || isReadOnly || readOnly}
-        ref={innerRef || this.inputRef}
-        {...((customIconUrl || customIconDimensions) && { style: customIconStyle })}
-        {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      />
+      >
+        <input
+          {...props}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          onChange={this.handleChange}
+          type={type}
+          value={this.sanitizeInputValue(value)}
+          aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+          required={isRequired}
+          disabled={isDisabled}
+          readOnly={!!readOnlyVariant || readOnly}
+          ref={innerRef || this.inputRef}
+          placeholder={placeholder}
+          {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+        />
+        {(customIcon || hasStatusIcon) && (
+          <div className={css(styles.formControlUtilities)}>
+            {customIcon && <FormControlIcon customIcon={customIcon} />}
+            {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+          </div>
+        )}
+      </div>
     );
   }
 
diff --git a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx
index 914f3cacac1..4d5f516ab85 100644
--- a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx
+++ b/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -59,12 +59,12 @@ describe('TextInput', () => {
 
   test('validated text input success', () => {
     render(<TextInput {...props} required validated={ValidatedOptions.success} aria-label="validated text input" />);
-    expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-success');
+    expect(screen.getByLabelText('validated text input').parentElement).toHaveClass('pf-m-success');
   });
 
   test('validated text input warning', () => {
     render(<TextInput {...props} required validated={ValidatedOptions.warning} aria-label="validated text input" />);
-    expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-warning');
+    expect(screen.getByLabelText('validated text input').parentElement).toHaveClass('pf-m-warning');
   });
 
   test('validated text input error', () => {
diff --git a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
index 53f7d8a37e3..28fd5a45c09 100644
--- a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2,109 +2,167 @@
 
 exports[`TextInput default read only text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="default read only text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only default"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-readonly"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="default read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      readonly=""
+      type="text"
+      value="read only default"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="disabled text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    disabled=""
-    type="text"
-    value=""
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-disabled"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="disabled text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      disabled=""
+      type="text"
+      value=""
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput invalid text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="true"
-    aria-label="invalid text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-error"
+  >
+    <input
+      aria-invalid="true"
+      aria-label="invalid text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput plain read only text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="plain read only text input"
-    class="pf-v5-c-form-control pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only plain"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="plain read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      readonly=""
+      type="text"
+      value="read only plain"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="read only text input"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only"
-  />
+  >
+    <input
+      aria-invalid="false"
+      aria-label="read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="read only"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput simple text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="simple text input"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  >
+    <input
+      aria-invalid="false"
+      aria-label="simple text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput validated text input error 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="true"
-    aria-label="validated text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-error"
+  >
+    <input
+      aria-invalid="true"
+      aria-label="validated text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md
index 1d50821a8c6..2a5a2ee800f 100644
--- a/packages/react-core/src/components/TextInput/examples/TextInput.md
+++ b/packages/react-core/src/components/TextInput/examples/TextInput.md
@@ -6,46 +6,55 @@ cssPrefix: pf-c-form-control
 propComponents: ['TextInput']
 ---
 
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
 ## Examples
 
 ### Basic
 
 ```ts file="./TextInputBasic.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextInputDisabled.tsx"
+
 ```
 
 ### Truncated on Left
 
 ```ts file="./TextInputLeftTruncated.tsx"
+
 ```
 
 ### Read only
 
 ```ts file="./TextInputReadOnly.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./TextInputInvalid.tsx"
+
 ```
 
 ### Select text using ref
 
 ```ts file="./TextInputSelectUsingRef.tsx"
+
 ```
 
-### Icon variants
+### Custom icon
+
+```ts file="./TextInputCustomIcon.tsx"
 
-```ts file="./TextInputIcon.tsx"
 ```
 
-### Icon sprite variants
+### Custom icon and invalid
 
-**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+```ts file="./TextInputCustomIconInvalid.tsx"
 
-```ts file="./TextInputIconSprite.tsx"
 ```
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx b/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx
new file mode 100644
index 00000000000..12d2061721d
--- /dev/null
+++ b/packages/react-core/src/components/TextInput/examples/TextInputCustomIcon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
+export const TextInputCustomIcon: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        customIcon={<CalendarIcon />}
+        onChange={(_event, value) => setCalendar(value)}
+        aria-label="text input example with calendar icon"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        type="text"
+        customIcon={<ClockIcon />}
+        onChange={(_event, value) => setClock(value)}
+        aria-label="text input example with clock icon"
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx b/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx
new file mode 100644
index 00000000000..86fbdfaf741
--- /dev/null
+++ b/packages/react-core/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput, ValidatedOptions } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+
+export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        validated={ValidatedOptions.error}
+        customIcon={<CalendarIcon />}
+        onChange={(_event, value) => setCalendar(value)}
+        aria-label="text input example with calendar icon"
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx b/packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx
deleted file mode 100644
index fa16412715e..00000000000
--- a/packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-export const TextInputIcon: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [custom, setCustom] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={calendar}
-        type="text"
-        iconVariant="calendar"
-        onChange={(_event, value) => setCalendar(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        type="text"
-        iconVariant="clock"
-        onChange={(_event, value) => setClock(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={custom}
-        type="text"
-        customIconDimensions="24px 24px"
-        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
-        onChange={(_event, value) => setCustom(value)}
-        aria-label="text input example"
-      />
-    </>
-  );
-};
diff --git a/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx b/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx
deleted file mode 100644
index a8f72af2939..00000000000
--- a/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-export const TextInputIconSprite: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={success}
-        validated={'success'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setSuccess(value)}
-        aria-label="success icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={warning}
-        validated={'warning'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={error}
-        validated={'error'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setError(value)}
-        aria-label="error icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={calendar}
-        isIconSprite
-        type="text"
-        iconVariant="calendar"
-        onChange={(_event, value) => setCalendar(value)}
-        aria-label="calendar icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        isIconSprite
-        type="text"
-        iconVariant="clock"
-        onChange={(_event, value) => setClock(value)}
-        aria-label="clock icon sprite text input example"
-      />
-    </>
-  );
-};
diff --git a/packages/react-core/src/components/TimePicker/TimePicker.tsx b/packages/react-core/src/components/TimePicker/TimePicker.tsx
index a27adc59768..36b6fb06561 100644
--- a/packages/react-core/src/components/TimePicker/TimePicker.tsx
+++ b/packages/react-core/src/components/TimePicker/TimePicker.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -21,7 +20,7 @@ import {
   getSeconds
 } from './TimePickerUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
-
+import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 export interface TimePickerProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** Additional classes added to the time picker. */
@@ -502,14 +501,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const textInput = (
       <TextInput
         aria-haspopup="menu"
-        className={css(formStyles.formControl)}
         id={`${randomId}-input`}
         aria-label={ariaLabel}
         validated={isInvalid ? 'error' : 'default'}
         placeholder={placeholder}
         value={timeState || ''}
         type="text"
-        iconVariant="clock"
+        customIcon={<OutlinedClockIcon />}
         onClick={this.onInputClick}
         onChange={this.onInputChange}
         autoComplete="off"
diff --git a/packages/react-core/src/components/TreeView/TreeViewSearch.tsx b/packages/react-core/src/components/TreeView/TreeViewSearch.tsx
index 1eea53b1b19..a0bbfe06fa4 100644
--- a/packages/react-core/src/components/TreeView/TreeViewSearch.tsx
+++ b/packages/react-core/src/components/TreeView/TreeViewSearch.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 /** Renders a search input for the tree view. This sub-component should be passed into the
  * tree view component's toolbar property.
@@ -29,15 +30,14 @@ export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({
   ...props
 }: TreeViewSearchProps) => (
   <div className={css(styles.treeViewSearch, className)}>
-    <input
-      className={css(formStyles.formControl, formStyles.modifiers.search)}
-      onChange={onSearch}
-      id={id}
-      name={name}
-      aria-label={ariaLabel}
-      type="search"
-      {...props}
-    />
+    <div className={css(formStyles.formControl, formStyles.modifiers.icon)}>
+      <input onChange={onSearch} id={id} name={name} aria-label={ariaLabel} type="search" {...props} />
+      <div className={css(formStyles.formControlUtilities)}>
+        <div className={css(formStyles.formControlIcon)}>
+          <SearchIcon />
+        </div>
+      </div>
+    </div>
   </div>
 );
 TreeViewSearch.displayName = 'TreeViewSearch';
diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
index 7955bdc40b5..b20436440f7 100644
--- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
+++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
@@ -2903,13 +2903,35 @@ exports[`tree view renders search successfully 1`] = `
   <div
     class="pf-v5-c-tree-view__search"
   >
-    <input
-      aria-label="Search input example"
-      class="pf-v5-c-form-control pf-m-search"
-      id="input-search"
-      name="search-input"
-      type="search"
-    />
+    <div
+      class="pf-v5-c-form-control pf-m-icon"
+    >
+      <input
+        aria-label="Search input example"
+        id="input-search"
+        name="search-input"
+        type="search"
+      />
+      <div
+        class="pf-v5-c-form-control__utilities"
+      >
+        <div
+          class="pf-v5-c-form-control__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
index 2a9462d18f8..541fcb839f1 100644
--- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -96,7 +96,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
               id="date-time"
               aria-label="date and time picker demo"
               value={valueDate + ' ' + valueTime}
-              isReadOnly
+              readOnlyVariant="default"
             />
           </InputGroupItem>
           <InputGroupItem>{calendarButton}</InputGroupItem>
diff --git a/packages/react-core/src/deprecated/components/Select/Select.tsx b/packages/react-core/src/deprecated/components/Select/Select.tsx
index c0f0853089a..a56ef5a0edc 100644
--- a/packages/react-core/src/deprecated/components/Select/Select.tsx
+++ b/packages/react-core/src/deprecated/components/Select/Select.tsx
@@ -295,7 +295,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     // Move focus to top of the menu if state.focusFirstOption was updated to true and the menu does not have custom content
     if (!prevState.focusFirstOption && this.state.focusFirstOption && !this.props.customContent) {
       const firstRef = this.refCollection.find(
-        ref =>
+        (ref) =>
           // If a select option is disabled then ref[0] will be undefined, so we want to return
           // the first ref that both a) is not null and b) is not disabled.
           ref !== null && ref[0]
@@ -467,14 +467,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           this.getDisplay(child.props.value.toString(), 'text').search(input) === 0;
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? React.Children.map(children, group => {
+            ? React.Children.map(children, (group) => {
                 if (
                   React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
                   group.type === SelectGroup
                 ) {
-                  const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
-                    SelectGroupProps
-                  >[]).filter(childFilter);
+                  const filteredGroupChildren = (
+                    React.Children.toArray(group.props.children) as React.ReactElement<SelectGroupProps>[]
+                  ).filter(childFilter);
                   if (filteredGroupChildren.length > 0) {
                     return React.cloneElement(group, {
                       titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
@@ -489,7 +489,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       } else {
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? childrenArray.filter(child => {
+            ? childrenArray.filter((child) => {
                 const valueToCheck = child.props.value;
                 // Dividers don't have value and should not be filtered
                 if (!valueToCheck) {
@@ -540,10 +540,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         const newOptionValue = isCreateSelectOptionObject
           ? ({
               toString: () => newValue,
-              compareTo: value =>
-                this.toString()
-                  .toLowerCase()
-                  .includes(value.toString().toLowerCase())
+              compareTo: (value) => this.toString().toLowerCase().includes(value.toString().toLowerCase())
             } as SelectOptionObject)
           : newValue;
 
@@ -665,8 +662,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
-    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
+    this.refCollection[index] = [optionRef as unknown as HTMLElement, favoriteRef as unknown as HTMLElement];
+    this.optionContainerRefCollection[index] = optionContainerRef as unknown as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {
@@ -698,7 +695,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       // !isLoad prevents the view more button text from appearing the typeahead input
       typeaheadInputValue = optionTextElm.textContent;
     }
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
       typeaheadStoredIndex: nextIndex,
       typeaheadInputValue
@@ -900,7 +897,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         this.moveFocus(nextIndex);
       } else {
         const nextIndex = this.refCollection.findIndex(
-          ref => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
+          (ref) => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
         );
         this.moveFocus(nextIndex);
       }
@@ -920,9 +917,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const item = this.props.isGrouped
       ? (React.Children.toArray(this.props.children) as React.ReactElement[])
           .reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
-          .find(child => child.props.value.toString() === value.toString())
+          .find((child) => child.props.value.toString() === value.toString())
       : React.Children.toArray(this.props.children).find(
-          child =>
+          (child) =>
             (child as React.ReactElement).props.value &&
             (child as React.ReactElement).props.value.toString() === value.toString()
         );
@@ -945,7 +942,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       return '';
     } else {
       const multi: string[] = [];
-      React.Children.toArray(item.props.children).forEach(child => multi.push(this.findText(child)));
+      React.Children.toArray(item.props.children).forEach((child) => multi.push(this.findText(child)));
       return multi.join('');
     }
   };
@@ -1084,7 +1081,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     }
 
     if (isOpen) {
-      if (renderableItems.find(item => (item as any)?.key === 'loading') === undefined) {
+      if (renderableItems.find((item) => (item as any)?.key === 'loading') === undefined) {
         if (loadingVariant === 'spinner') {
           renderableItems.push(
             <SelectOption isLoading key="loading" value="loading">
@@ -1109,7 +1106,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const clearBtn = (
       <button
         className={css(buttonStyles.button, buttonStyles.modifiers.plain, styles.selectToggleClear)}
-        onClick={e => {
+        onClick={(e) => {
           this.clearSelection(e);
           onClear(e);
           e.stopPropagation();
@@ -1118,7 +1115,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         type="button"
         disabled={isDisabled}
         ref={this.clearRef}
-        onKeyDown={event => {
+        onKeyDown={(event) => {
           if (event.key === KeyTypes.Enter) {
             this.clearRef.current.click();
           }
@@ -1135,7 +1132,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       ) : (
         <ChipGroup {...chipGroupProps}>
           {selections &&
-            (selections as string[]).map(item => (
+            (selections as string[]).map((item) => (
               <Chip
                 key={item}
                 onClick={(e: React.MouseEvent) => onSelect(e, item)}
@@ -1151,14 +1148,13 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     if (hasInlineFilter) {
       const filterBox = (
         <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
+          <div key="inline-filter" className={css(styles.selectMenuSearch, formStyles.formControl)}>
             <input
               key="inline-filter-input"
               type="search"
-              className={css(formStyles.formControl, formStyles.modifiers.search)}
               onChange={this.onChange}
               placeholder={inlineFilterPlaceholderText}
-              onKeyDown={event => {
+              onKeyDown={(event) => {
                 if (event.key === KeyTypes.ArrowUp) {
                   this.handleMenuKeys(0, 0, 'up');
                   event.preventDefault();
@@ -1462,7 +1458,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     return (
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <SelectContext.Provider
             value={{
               onSelect,
diff --git a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index b5453477dd6..dd55bbe5928 100644
--- a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1192,11 +1192,10 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         class="pf-v5-c-form__fieldset"
       >
         <div
-          class="pf-v5-c-select__menu-search"
+          class="pf-v5-c-select__menu-search pf-v5-c-form-control"
         >
           <input
             autocomplete="off"
-            class="pf-v5-c-form-control pf-m-search"
             type="search"
           />
         </div>
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 9556a6b9ae6..18d496244f1 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.53",
+    "@patternfly/patternfly": "5.0.0-alpha.54",
     "@patternfly/react-charts": "^7.0.0-alpha.26",
     "@patternfly/react-code-editor": "^5.0.0-alpha.109",
     "@patternfly/react-core": "^5.0.0-alpha.108",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 7c67bef35e8..94680c5ab51 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -32,7 +32,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "5.0.0-alpha.53",
+    "@patternfly/patternfly": "5.0.0-alpha.54",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
diff --git a/packages/react-integration/cypress/integration/clipboardcopy.spec.ts b/packages/react-integration/cypress/integration/clipboardcopy.spec.ts
index a9c5aac6546..fbed3c30aec 100644
--- a/packages/react-integration/cypress/integration/clipboardcopy.spec.ts
+++ b/packages/react-integration/cypress/integration/clipboardcopy.spec.ts
@@ -4,7 +4,7 @@ describe('Clipboard Copy Demo Test', () => {
   });
 
   it('Verify form input', () => {
-    cy.get('input').should('have.class', 'pf-v5-c-form-control');
+    cy.get('.pf-v5-c-form-control > input').should('exist');
   });
 
   it('Verify content expands', () => {
diff --git a/packages/react-integration/cypress/integration/form.spec.ts b/packages/react-integration/cypress/integration/form.spec.ts
index 1969600df3e..2f5bd1cf0a0 100644
--- a/packages/react-integration/cypress/integration/form.spec.ts
+++ b/packages/react-integration/cypress/integration/form.spec.ts
@@ -28,7 +28,7 @@ describe('Form Demo Test', () => {
   });
 
   it('Verify form validates form group', () => {
-    cy.get('#age-validated.pf-m-success').should('not.exist');
+    cy.get('.pf-m-success > #age-validated').should('not.exist');
     cy.get('.pf-v5-c-helper-text').contains('Enter age');
     // type string that is not a number so it is invalid
     cy.get('#age-validated').type('hi');
@@ -41,7 +41,7 @@ describe('Form Demo Test', () => {
     // 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('#age-validated.pf-m-success').should('exist');
+    cy.get('.pf-m-success > #age-validated').should('exist');
     cy.get('.pf-v5-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');
diff --git a/packages/react-integration/cypress/integration/searchinput.spec.ts b/packages/react-integration/cypress/integration/searchinput.spec.ts
index d7ed6c987c0..e4dd83d93f1 100644
--- a/packages/react-integration/cypress/integration/searchinput.spec.ts
+++ b/packages/react-integration/cypress/integration/searchinput.spec.ts
@@ -55,19 +55,19 @@ describe('Search Input Demo Test', () => {
     cy.get('#enabled-search .pf-v5-c-input-group .pf-v5-c-input-group__item >  button').eq(0).click();
     cy.get('#enabled-search .pf-v5-c-panel').should('be.visible');
 
-    cy.get('#enabled-search .pf-v5-c-form-control').eq(0).type('test');
+    cy.get('#enabled-search .pf-v5-c-form-control > input').eq(0).type('test');
     cy.get('#enabled-search .pf-v5-c-text-input-group__text-input').should('have.value', 'username:test');
 
     cy.get('#enabled-search .pf-v5-c-text-input-group__text-input').type(' firstname:hi another test');
-    cy.get('#enabled-search .pf-v5-c-form-control').eq(1).should('have.value', 'hi');
-    cy.get('#enabled-search .pf-v5-c-form-control').eq(2).should('have.value', 'another test');
+    cy.get('#enabled-search .pf-v5-c-form-control > input').eq(1).should('have.value', 'hi');
+    cy.get('#enabled-search .pf-v5-c-form-control > input').eq(2).should('have.value', 'another test');
 
     cy.get('#enabled-search .pf-v5-c-form__actions button').eq(1).click();
     cy.get('#enabled-search .pf-v5-c-text-input-group__text-input').should('have.value', '');
-    cy.get('#enabled-search .pf-v5-c-form-control').eq(1).should('have.value', '');
-    cy.get('#enabled-search .pf-v5-c-form-control').eq(2).should('have.value', '');
+    cy.get('#enabled-search .pf-v5-c-form-control > input').eq(1).should('have.value', '');
+    cy.get('#enabled-search .pf-v5-c-form-control > input').eq(2).should('have.value', '');
 
-    cy.get('#enabled-search .pf-v5-c-form-control').eq(0).type('test');
+    cy.get('#enabled-search .pf-v5-c-form-control > input').eq(0).type('test');
     cy.get('#enabled-search .pf-v5-c-form__actions button').eq(0).click();
     cy.get('#enabled-search .pf-v5-c-form input').should('not.exist');
     cy.get('#enabled-search .pf-v5-c-text-input-group__text-input').should('have.value', 'username:test');
diff --git a/packages/react-integration/cypress/integration/tableeditable.spec.ts b/packages/react-integration/cypress/integration/tableeditable.spec.ts
index 96d0bcad285..2d38778fde1 100644
--- a/packages/react-integration/cypress/integration/tableeditable.spec.ts
+++ b/packages/react-integration/cypress/integration/tableeditable.spec.ts
@@ -17,7 +17,7 @@ describe('Table Simple Test', () => {
 
   it('Check edit', () => {
     cy.get(
-      '.pf-m-inline-editable > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     ).type('test');
     cy.get(
       '.pf-m-inline-editable > [data-label="Dropdown col 5"] > .pf-v5-c-inline-edit__input > .pf-v5-c-select > .pf-v5-c-select__toggle > .pf-v5-c-select__toggle-button'
@@ -41,7 +41,7 @@ describe('Table Simple Test', () => {
       '.pf-v5-c-inline-edit tbody tr:nth-of-type(2) > .pf-v5-c-table__inline-edit-action .pf-v5-c-inline-edit__action.pf-m-enable-editable > .pf-v5-c-button'
     ).click();
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(2) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(2) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('xyz');
@@ -65,7 +65,7 @@ describe('Table Simple Test', () => {
       '.pf-v5-c-inline-edit tbody tr:nth-of-type(1) > .pf-v5-c-table__inline-edit-action .pf-v5-c-inline-edit__action.pf-m-enable-editable > .pf-v5-c-button'
     ).click();
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('foo');
@@ -85,7 +85,7 @@ describe('Table Simple Test', () => {
       '.pf-v5-c-inline-edit tbody tr:nth-of-type(1) > .pf-v5-c-table__inline-edit-action .pf-v5-c-inline-edit__action.pf-m-enable-editable > .pf-v5-c-button'
     ).click();
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('xyz');
@@ -93,7 +93,7 @@ describe('Table Simple Test', () => {
       '.pf-m-inline-editable:nth-of-type(1) > .pf-v5-c-table__inline-edit-action > .pf-v5-c-inline-edit__group > :nth-child(1) > .pf-v5-c-button'
     ).click();
     cy.get(
-      '.pf-v5-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-v5-c-inline-edit__input .pf-v5-c-form-control'
+      '.pf-v5-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-v5-c-inline-edit__input .pf-v5-c-form-control > input'
     ).should('have.attr', 'aria-invalid', 'true');
     cy.get(
       '.pf-m-inline-editable:nth-of-type(1) > .pf-v5-c-table__inline-edit-action > .pf-v5-c-inline-edit__group > :nth-child(2) > .pf-v5-c-button'
@@ -105,15 +105,15 @@ describe('Table Simple Test', () => {
       '.pf-v5-c-inline-edit tbody tr:nth-of-type(1) > .pf-v5-c-table__inline-edit-action .pf-v5-c-inline-edit__action.pf-m-enable-editable > .pf-v5-c-button'
     ).click(); // click the edit button
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('foo'); // enter foo into first field
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     ).clear();
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('xyz'); // enter xyz into last field
@@ -139,12 +139,12 @@ describe('Table Simple Test', () => {
       '.pf-v5-c-inline-edit tbody tr:nth-of-type(1) > .pf-v5-c-table__inline-edit-action .pf-v5-c-inline-edit__action.pf-m-enable-editable > .pf-v5-c-button'
     ).click(); // click the edit button
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('foo'); // enter foo into first field
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     ).clear(); // clear the third field text
     cy.get(
       '.pf-m-inline-editable:nth-of-type(1) > .pf-v5-c-table__inline-edit-action > .pf-v5-c-inline-edit__group > :nth-child(1) > .pf-v5-c-button'
@@ -156,7 +156,7 @@ describe('Table Simple Test', () => {
       '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-v5-c-inline-edit__input > .pf-m-error'
     ).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     )
       .clear()
       .type('1234567'); // update first field to valid entry
@@ -164,7 +164,7 @@ describe('Table Simple Test', () => {
       '.pf-m-inline-editable:nth-of-type(1) > .pf-v5-c-table__inline-edit-action > .pf-v5-c-inline-edit__group > :nth-child(1) > .pf-v5-c-button'
     ).click(); // attempt to submit invalid entries
     cy.get(
-      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control'
+      '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-v5-c-inline-edit__input > .pf-v5-c-form-control > input'
     ).should('have.attr', 'aria-invalid', 'false'); // ensure first field releases error text
     cy.get(
       '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-v5-c-inline-edit__input > .pf-m-error'
diff --git a/packages/react-integration/cypress/integration/textarea.spec.ts b/packages/react-integration/cypress/integration/textarea.spec.ts
index 0b5f1ae27e5..d81d1fdf18b 100644
--- a/packages/react-integration/cypress/integration/textarea.spec.ts
+++ b/packages/react-integration/cypress/integration/textarea.spec.ts
@@ -26,7 +26,7 @@ describe('Text Area Demo Test', () => {
     // Clear text area and verify it is invalid
     cy.get('#textarea1')
       .clear()
-      .then(textarea => {
+      .then((textarea) => {
         expect(textarea.attr('aria-invalid')).to.be.equal('true');
       });
   });
@@ -40,65 +40,62 @@ describe('Text Area Demo Test', () => {
     // Clear text area and verify it is invalid
     cy.get('#textarea2')
       .clear()
-      .then(textarea => {
+      .then((textarea) => {
         expect(textarea.attr('aria-invalid')).to.be.equal('true');
       });
   });
 
   it('Verify Text Area can has horizontally resizable attribute', () => {
-    cy.get('#textarea3.pf-m-resize-horizontal').should('exist');
+    cy.get('.pf-m-resize-horizontal > #textarea3').should('exist');
     cy.get('#textarea3').should('have.value', '');
     cy.get('#textarea3').type('testing');
     cy.get('#textarea3').should('have.value', 'testing');
     // Clear text area and verify it is invalid
     cy.get('#textarea3')
       .clear()
-      .then(textarea => {
+      .then((textarea) => {
         expect(textarea.attr('aria-invalid')).to.be.equal('true');
       });
   });
 
   it('Verify Text Area can has vertically resizable attribute', () => {
-    cy.get('#textarea4.pf-m-resize-vertical').should('exist');
+    cy.get('.pf-m-resize-vertical > #textarea4').should('exist');
     cy.get('#textarea4').should('have.value', '');
     cy.get('#textarea4').type('testing');
     cy.get('#textarea4').should('have.value', 'testing');
     // Clear text area and verify it is invalid
     cy.get('#textarea4')
       .clear()
-      .then(textarea => {
+      .then((textarea) => {
         expect(textarea.attr('aria-invalid')).to.be.equal('true');
       });
   });
 
   it('Verify Text Area can be validated using validated prop', () => {
-    cy.get('#textarea5.pf-m-success').should('not.exist');
-    cy.get('#textarea5').then(textarea => {
+    cy.get('.pf-m-success > #textarea5').should('not.exist');
+    cy.get('#textarea5').then((textarea) => {
       expect(textarea.attr('aria-invalid')).to.be.equal('false');
     });
     cy.get('#textarea5').should('have.value', '');
     // Type string value less than 5 characters so it is invalid
     cy.get('#textarea5').type('test');
     cy.get('#textarea5').should('have.value', 'test');
-    cy.get('#textarea5').then(textarea => {
+    cy.get('#textarea5').then((textarea) => {
       expect(textarea.attr('aria-invalid')).to.be.equal('true');
     });
     // Clear text area and type string longer than 5 Characters so it is valid
-    cy.get('#textarea5')
-      .clear()
-      .type('testing')
-      .should('have.value', 'testing');
-    cy.get('#textarea5.pf-m-success').should('exist');
-    cy.get('#textarea5').then(textarea => {
+    cy.get('#textarea5').clear().type('testing').should('have.value', 'testing');
+    cy.get('.pf-m-success > #textarea5').should('exist');
+    cy.get('#textarea5').then((textarea) => {
       expect(textarea.attr('aria-invalid')).to.be.equal('false');
     });
     // Clear text area and verify it is warning
     cy.get('#textarea5')
       .clear()
-      .then(textarea => {
+      .then((textarea) => {
         expect(textarea.attr('aria-invalid')).to.be.equal('false');
       });
-    cy.get('#textarea5.pf-m-warning').should('exist');
+    cy.get('.pf-m-warning > #textarea5').should('exist');
   });
 
   it('Verify Text Area can not be changed when disabled', () => {
@@ -120,11 +117,9 @@ describe('Text Area Demo Test', () => {
   it('Verify text area autoresizes', () => {
     cy.get('#autoResize')
       .invoke('outerHeight')
-      .then(startingHeight => {
+      .then((startingHeight) => {
         cy.get('#autoResize').type('0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0');
-        cy.get('#autoResize')
-          .invoke('outerHeight')
-          .should('be.gt', startingHeight);
+        cy.get('#autoResize').invoke('outerHeight').should('be.gt', startingHeight);
       });
   });
 });
diff --git a/packages/react-integration/cypress/integration/textinputdemo.spec.ts b/packages/react-integration/cypress/integration/textinputdemo.spec.ts
index ee92cb82fd6..e5a820ebe86 100644
--- a/packages/react-integration/cypress/integration/textinputdemo.spec.ts
+++ b/packages/react-integration/cypress/integration/textinputdemo.spec.ts
@@ -21,32 +21,29 @@ describe('Text Input Demo Test', () => {
   });
 
   it('Verify Text input can be validated using validated prop', () => {
-    cy.get('#text-validated.pf-m-success').should('not.exist');
-    cy.get('#text-validated').then(textinput => {
+    cy.get('.pf-m-success > #text-validated').should('not.exist');
+    cy.get('#text-validated').then((textinput) => {
       expect(textinput.attr('aria-invalid')).to.be.equal('false');
     });
     cy.get('#text-validated').should('have.value', '');
     // Type string value less than 5 characters so it is invalid
     cy.get('#text-validated').type('test');
     cy.get('#text-validated').should('have.value', 'test');
-    cy.get('#text-validated').then(textarea => {
+    cy.get('#text-validated').then((textarea) => {
       expect(textarea.attr('aria-invalid')).to.be.equal('true');
     });
     // Clear text input and type string longer than 5 Characters so it is valid
-    cy.get('#text-validated')
-      .clear()
-      .type('testing')
-      .should('have.value', 'testing');
-    cy.get('#text-validated.pf-m-success').should('exist');
-    cy.get('#text-validated').then(textinput => {
+    cy.get('#text-validated').clear().type('testing').should('have.value', 'testing');
+    cy.get('.pf-m-success > #text-validated').should('exist');
+    cy.get('#text-validated').then((textinput) => {
       expect(textinput.attr('aria-invalid')).to.be.equal('false');
     });
     // Clear text input and verify it is warning
     cy.get('#text-validated')
       .clear()
-      .then(textarea => {
+      .then((textarea) => {
         expect(textarea.attr('aria-invalid')).to.be.equal('false');
       });
-    cy.get('#text-validated.pf-m-warning').should('exist');
+    cy.get('.pf-m-warning > #text-validated').should('exist');
   });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx
index 5f92dc000ae..2cce8749f14 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx
@@ -129,7 +129,12 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> {
         <TextArea id="textarea6-b" value={'isDisabled text area'} aria-label="text area example 6 b" isDisabled />
         <Text>Read only text area </Text>
         <TextArea id="textarea7-a" value={'readOnly text area'} aria-label="text area example 7 a" readOnly />
-        <TextArea id="textarea7-b" value={'isReadOnly text area'} aria-label="text area example 7 b" isReadOnly />
+        <TextArea
+          id="textarea7-b"
+          value={'isReadOnly text area'}
+          aria-label="text area example 7 b"
+          readOnlyVariant="default"
+        />
         <TextArea id="autoResize" aria-label="resizable text area example" autoResize />
       </React.Fragment>
     );
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx
index b7c4e0dedca..9b4b54d2b08 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx
@@ -28,7 +28,10 @@ export class TextInputDemo extends Component {
     this.setState({ validatedTextInputValue: value, validated });
   };
 
-  handleLeftTruncatedTextInputChange = (_event: React.FormEvent<HTMLInputElement>, leftTruncatedTextInputValue: string) => {
+  handleLeftTruncatedTextInputChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    leftTruncatedTextInputValue: string
+  ) => {
     this.setState({ leftTruncatedTextInputValue });
   };
 
@@ -46,7 +49,7 @@ export class TextInputDemo extends Component {
   };
 
   myReadOnlyTextInputProps: TextInputProps = {
-    isReadOnly: true,
+    readOnlyVariant: 'default',
     value: 'read only text input example'
   };
 
@@ -66,7 +69,7 @@ export class TextInputDemo extends Component {
         />
         <TextInput
           id="text-read-only"
-          isReadOnly={this.myReadOnlyTextInputProps.isReadOnly}
+          readOnlyVariant={this.myReadOnlyTextInputProps.readOnlyVariant}
           value={this.myReadOnlyTextInputProps.value}
         />
         <Text>Text Input Truncated on Left Example</Text>
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 034491a06a2..45d606dbecb 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.53",
+    "@patternfly/patternfly": "5.0.0-alpha.54",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
index d3df5f41b72..4472c9ae1f1 100644
--- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -10181,16 +10181,19 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 1 cell 1 content"
+              <div
                 class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                type="text"
-                value="Row 1 cell 1 content"
-              />
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 1 cell 1 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  type="text"
+                  value="Row 1 cell 1 content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10211,17 +10214,20 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 1 cell 2 content"
-                class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                disabled=""
-                type="text"
-                value="Row 1 cell 2, disabled content"
-              />
+              <div
+                class="pf-v5-c-form-control pf-m-disabled"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 1 cell 2 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  disabled=""
+                  type="text"
+                  value="Row 1 cell 2, disabled content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10242,16 +10248,19 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 1 cell 3 content"
+              <div
                 class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                type="text"
-                value="Row 1 cell 3 content"
-              />
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 1 cell 3 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  type="text"
+                  value="Row 1 cell 3 content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10272,16 +10281,19 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 1 cell 4 content"
+              <div
                 class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                type="text"
-                value="Row 1 cell 4 content"
-              />
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 1 cell 4 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  type="text"
+                  value="Row 1 cell 4 content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10394,16 +10406,19 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 1 cell 1 content"
+              <div
                 class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                type="text"
-                value="Row 2 cell 1 content"
-              />
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 1 cell 1 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  type="text"
+                  value="Row 2 cell 1 content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10424,17 +10439,20 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 2 cell 2 content"
-                class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                disabled=""
-                type="text"
-                value="Row 2 cell 2, disabled content"
-              />
+              <div
+                class="pf-v5-c-form-control pf-m-disabled"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 2 cell 2 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  disabled=""
+                  type="text"
+                  value="Row 2 cell 2, disabled content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10455,16 +10473,19 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 2 cell 3 content"
+              <div
                 class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                type="text"
-                value="Row 2 cell 3 content"
-              />
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 2 cell 3 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  type="text"
+                  value="Row 2 cell 3 content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
@@ -10485,16 +10506,19 @@ exports[`Table simple Editable table 1`] = `
             <div
               class="pf-v5-c-inline-edit__input"
             >
-              <input
-                aria-invalid="false"
-                aria-label="Row 2 cell 4 content"
+              <div
                 class="pf-v5-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-8"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe="true"
-                type="text"
-                value="Row 2 cell 4 content"
-              />
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="Row 2 cell 4 content"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+                  data-ouia-component-type="PF4/TextInput"
+                  data-ouia-safe="true"
+                  type="text"
+                  value="Row 2 cell 4 content"
+                />
+              </div>
               <div
                 aria-live="polite"
                 class="pf-v5-c-form__helper-text pf-m-error"
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index a84c4e3c35d..77f6269d883 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.53",
+    "@patternfly/patternfly": "5.0.0-alpha.54",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
diff --git a/yarn.lock b/yarn.lock
index 3e6f5feb632..080ace5a325 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4091,10 +4091,10 @@
     puppeteer-cluster "^0.23.0"
     xmldoc "^1.1.2"
 
-"@patternfly/patternfly@5.0.0-alpha.53":
-  version "5.0.0-alpha.53"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-alpha.53.tgz#9eda25100680107c13793b98b6d4f56d947551fb"
-  integrity sha512-sy9lk98PLVGjFuJ6li9uIwKc/IXXhjv8Ow0Q/MDOCFrhnj2gWLjMr4uB4d0393mAGfD1vk8KkqF+7tfEDIBjpQ==
+"@patternfly/patternfly@5.0.0-alpha.54":
+  version "5.0.0-alpha.54"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-alpha.54.tgz#627c0e200be72b20c974d938b496d9e9dce5bf36"
+  integrity sha512-WdrMMze2n+8YQBMXlSBSHwytSwuKdwoybQippAAxZ0sAaqnJKYsQgOp0UDrK39rkiVziW1gPkCaw/YUSJAE9gA==
 
 "@phenomnomnominal/tsquery@4.1.1":
   version "4.1.1"