diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6239fa12865..c505afdec18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fixed bug in all input fields placeholders in Safari that weren't vertically centered ([#3809](https://github.com/elastic/eui/pull/3809))
 - Removed `pointer-events: none` in both `EuiButton` & `EuiButtonEmpty` to not override the `pointer-events: auto` in the button mixin `euiButtonContentDisabled` ([#3824](https://github.com/elastic/eui/pull/3824))
 - Fixed bug in `EuiPagination` showing wrong page count when `compressed` prop is true. ([#3827](https://github.com/elastic/eui/pull/3827))
+- Fixed bug in EUI's input field components where their `inputRef` couldn't be a `RefObject` ([#3822](https://github.com/elastic/eui/pull/3822))
 
 ## [`27.3.0`](https://github.com/elastic/eui/tree/v27.3.0)
 
diff --git a/src/components/form/validatable_control/validatable_control.test.tsx b/src/components/form/validatable_control/validatable_control.test.tsx
index a3d7da8191a..8ea3d87ca23 100644
--- a/src/components/form/validatable_control/validatable_control.test.tsx
+++ b/src/components/form/validatable_control/validatable_control.test.tsx
@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 
 import { EuiValidatableControl } from './validatable_control';
 
@@ -32,4 +32,34 @@ describe('EuiValidatableControl', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('ref management', () => {
+    it('calls a ref function', () => {
+      const ref = jest.fn();
+
+      mount(
+        <EuiValidatableControl>
+          <input id="testInput" ref={ref} />
+        </EuiValidatableControl>
+      );
+
+      expect(ref).toHaveBeenCalledTimes(1);
+
+      const input = ref.mock.calls[0][0];
+      expect(input.getAttribute('id')).toBe('testInput');
+    });
+
+    it('sets a ref object\'s "current" property', () => {
+      const ref = React.createRef<HTMLInputElement>();
+
+      mount(
+        <EuiValidatableControl>
+          <input id="testInput" ref={ref} />
+        </EuiValidatableControl>
+      );
+
+      expect(ref.current).not.toBeNull();
+      expect(ref.current!.getAttribute('id')).toBe('testInput');
+    });
+  });
 });
diff --git a/src/components/form/validatable_control/validatable_control.tsx b/src/components/form/validatable_control/validatable_control.tsx
index 3fe3db8cfec..c5e451cd189 100644
--- a/src/components/form/validatable_control/validatable_control.tsx
+++ b/src/components/form/validatable_control/validatable_control.tsx
@@ -17,7 +17,14 @@
  * under the License.
  */
 
-import { Children, cloneElement, Component, ReactElement } from 'react';
+import {
+  Children,
+  cloneElement,
+  Component,
+  MutableRefObject,
+  ReactElement,
+  Ref,
+} from 'react';
 import { CommonProps } from '../../common';
 
 export interface HTMLConstraintValidityElement extends Element {
@@ -25,7 +32,13 @@ export interface HTMLConstraintValidityElement extends Element {
 }
 
 export interface ReactElementWithRef extends ReactElement {
-  ref?: (element: HTMLConstraintValidityElement) => void;
+  ref?: Ref<HTMLConstraintValidityElement>;
+}
+
+function isMutableRef(
+  ref?: Ref<HTMLConstraintValidityElement>
+): ref is MutableRefObject<HTMLConstraintValidityElement> {
+  return ref != null && ref.hasOwnProperty('current');
 }
 
 export interface EuiValidatableControlProps {
@@ -68,6 +81,8 @@ export class EuiValidatableControl extends Component<
     const { ref } = this.props.children;
     if (typeof ref === 'function') {
       ref(element);
+    } else if (isMutableRef(ref)) {
+      ref.current = element;
     }
   };