diff --git a/.changeset/empty-suits-flow.md b/.changeset/empty-suits-flow.md
new file mode 100644
index 0000000000..35124fd3bf
--- /dev/null
+++ b/.changeset/empty-suits-flow.md
@@ -0,0 +1,7 @@
+---
+'@react-select/docs': minor
+'react-select': minor
+'storybook': minor
+---
+
+Ability to customize the DummyInput component
diff --git a/docs/examples/CustomDummyInput.tsx b/docs/examples/CustomDummyInput.tsx
new file mode 100644
index 0000000000..27dc7b035c
--- /dev/null
+++ b/docs/examples/CustomDummyInput.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Select, { components, DummyInputProps } from 'react-select';
+import { StateOption, stateOptions } from '../data';
+
+const DummyInput = (props: DummyInputProps<StateOption, false>) => {
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        border: '1px dashed #2684FF',
+        borderRadius: 4,
+        display: 'inline-flex',
+        gap: 6,
+        padding: '2px 6px',
+      }}
+    >
+      <span style={{ color: '#2684FF', fontSize: 11, fontWeight: 600 }}>
+        Custom Dummy Input
+      </span>
+      <components.DummyInput {...props} />
+    </div>
+  );
+};
+
+export default () => (
+  <Select
+    isSearchable={false}
+    options={stateOptions}
+    components={{ DummyInput }}
+    placeholder="Select an option"
+  />
+);
diff --git a/docs/examples/index.tsx b/docs/examples/index.tsx
index e8bff14f43..3d8371dfeb 100644
--- a/docs/examples/index.tsx
+++ b/docs/examples/index.tsx
@@ -9,6 +9,7 @@ export { default as BasicMulti } from './BasicMulti';
 export { default as BasicSingle } from './BasicSingle';
 export { default as CustomAriaLive } from './CustomAriaLive';
 export { default as CustomControl } from './CustomControl';
+export { default as CustomDummyInput } from './CustomDummyInput';
 export { default as CreatableAdvanced } from './CreatableAdvanced';
 export { default as CreatableInputOnly } from './CreatableInputOnly';
 export { default as CreateFilter } from './CreateFilter';
diff --git a/docs/pages/advanced/index.tsx b/docs/pages/advanced/index.tsx
index 2d7f8fc74a..03877b282e 100644
--- a/docs/pages/advanced/index.tsx
+++ b/docs/pages/advanced/index.tsx
@@ -8,6 +8,7 @@ import {
   CreateFilter,
   ControlledMenu,
   CustomAriaLive,
+  CustomDummyInput,
   CustomFilterOptions,
   CustomGetOptionLabel,
   CustomGetOptionValue,
@@ -164,6 +165,16 @@ export default function Advanced() {
         </ExampleWrapper>
       )}
 
+      ${(
+        <ExampleWrapper
+          label="Custom DummyInput with non-searchable Select"
+          urlPath="docs/examples/CustomDummyInput.tsx"
+          raw={require('!!raw-loader!../../examples/CustomDummyInput.tsx')}
+        >
+          <CustomDummyInput />
+        </ExampleWrapper>
+      )}
+
       ## Methods
 
       These two methods sit as callable methods on the component. They are designed
diff --git a/docs/pages/components/index.tsx b/docs/pages/components/index.tsx
index 5ce78c347e..f6e025e231 100644
--- a/docs/pages/components/index.tsx
+++ b/docs/pages/components/index.tsx
@@ -16,6 +16,7 @@ import {
   CustomMultiValueRemove,
   CustomMultiValueLabel,
   CustomControl,
+  CustomDummyInput,
   CustomGroup,
   CustomInput,
   CustomOption,
@@ -47,6 +48,7 @@ export default function Components() {
         The following components are customisable and switchable:
           * ClearIndicator
           * Control
+          * DummyInput
           * DropdownIndicator
           * DownChevron
           * CrossIcon
@@ -339,6 +341,16 @@ export default function Components() {
           </ExampleWrapper>
         )}
 
+        ${(
+          <ExampleWrapper
+            label="Custom DummyInput Example"
+            urlPath="docs/examples/CustomDummyInput.tsx"
+            raw={require('!!raw-loader!../../examples/CustomDummyInput.tsx')}
+          >
+            <CustomDummyInput />
+          </ExampleWrapper>
+        )}
+
         ### LoadingIndicator
 
         Loading indicator to be displayed in the Indicators Container when \`isLoading\`
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 146d084e20..d19f290192 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -15,7 +15,7 @@ import { MenuPlacer } from './components/Menu';
 import LiveRegion from './components/LiveRegion';
 
 import { createFilter, FilterOptionOption } from './filters';
-import { DummyInput, ScrollManager, RequiredInput } from './internal/index';
+import { ScrollManager, RequiredInput } from './internal/index';
 import { AriaLiveMessages, AriaSelection } from './accessibility/index';
 import { isAppleDevice } from './accessibility/helpers';
 
@@ -1712,7 +1712,7 @@ export default class Select<
       menuIsOpen,
       required,
     } = this.props;
-    const { Input } = this.getComponents();
+    const { DummyInput, Input } = this.getComponents();
     const { inputIsHidden, ariaSelection } = this.state;
     const { commonProps } = this;
 
@@ -1752,6 +1752,7 @@ export default class Select<
       // use a dummy input to maintain focus/blur functionality
       return (
         <DummyInput
+          {...commonProps}
           id={id}
           innerRef={this.getInputRef}
           onBlur={this.onInputBlur}
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 0313149095..dbb8e5085f 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2892,6 +2892,26 @@ test('render custom Input Component', () => {
   expect(container.querySelector('.my-input-component')).toBeInTheDocument();
 });
 
+test('render custom DummyInput Component', () => {
+  const DummyInputComponent = () => (
+    <div className="my-dummy-input-component" />
+  );
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      isSearchable={false}
+      components={{ DummyInput: DummyInputComponent }}
+    />
+  );
+
+  expect(
+    container.querySelector('input.react-select__dummy-input')
+  ).not.toBeInTheDocument();
+  expect(
+    container.querySelector('.my-dummy-input-component')
+  ).toBeInTheDocument();
+});
+
 test('render custom Menu Component', () => {
   const MenuComponent = () => <div className="my-menu-component" />;
   let { container } = render(
diff --git a/packages/react-select/src/components/DummyInput.tsx b/packages/react-select/src/components/DummyInput.tsx
new file mode 100644
index 0000000000..8c030aa9a9
--- /dev/null
+++ b/packages/react-select/src/components/DummyInput.tsx
@@ -0,0 +1,91 @@
+/** @jsx jsx */
+import { InputHTMLAttributes, Ref } from 'react';
+import { jsx } from '@emotion/react';
+
+import {
+  CommonPropsAndClassName,
+  CSSObjectWithLabel,
+  GroupBase,
+} from '../types';
+import { cleanCommonProps, removeProps } from '../utils';
+
+export interface DummyInputProps<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> extends InputHTMLAttributes<HTMLInputElement>,
+    CommonPropsAndClassName<Option, IsMulti, Group> {
+  readonly innerRef: Ref<HTMLInputElement>;
+}
+
+export const dummyInputCSS = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: DummyInputProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => {
+  void props;
+  void unstyled;
+
+  return {
+    label: 'dummyInput',
+    // get rid of any default styles
+    background: 0,
+    border: 0,
+    // important! this hides the flashing cursor
+    caretColor: 'transparent',
+    fontSize: 'inherit',
+    gridArea: '1 / 1 / 2 / 3',
+    outline: 0,
+    padding: 0,
+    // important! without `width` browsers won't allow focus
+    width: 1,
+
+    // remove cursor on desktop
+    color: 'transparent',
+
+    // remove cursor on mobile whilst maintaining "scroll into view" behaviour
+    left: -100,
+    opacity: 0,
+    position: 'relative',
+    transform: 'scale(.01)',
+  };
+};
+
+const DummyInput = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: DummyInputProps<Option, IsMulti, Group>
+) => {
+  const { cx, getStyles, getClassNames, className } = props;
+  const { innerRef, ...innerProps } = cleanCommonProps(props);
+
+  // Remove animation props not meant for HTML elements
+  const filteredProps = removeProps(
+    innerProps,
+    'onExited',
+    'in',
+    'enter',
+    'exit',
+    'appear'
+  );
+
+  return (
+    <input
+      ref={innerRef}
+      {...filteredProps}
+      css={getStyles('dummyInput', props)}
+      className={cx(
+        { 'dummy-input': true },
+        getClassNames('dummyInput', props),
+        className
+      )}
+    />
+  );
+};
+
+export default DummyInput;
diff --git a/packages/react-select/src/components/index.ts b/packages/react-select/src/components/index.ts
index d2c9b84c5e..385ee2b9fb 100644
--- a/packages/react-select/src/components/index.ts
+++ b/packages/react-select/src/components/index.ts
@@ -23,6 +23,7 @@ import {
 } from './indicators';
 
 import Control, { ControlProps } from './Control';
+import DummyInput, { DummyInputProps } from './DummyInput';
 import Group, { GroupHeading, GroupHeadingProps, GroupProps } from './Group';
 import Input, { InputProps } from './Input';
 import Menu, {
@@ -55,6 +56,7 @@ export interface SelectComponents<
 > {
   ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
   Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
+  DummyInput: ComponentType<DummyInputProps<Option, IsMulti, Group>>;
   DropdownIndicator: ComponentType<
     DropdownIndicatorProps<Option, IsMulti, Group>
   > | null;
@@ -103,6 +105,7 @@ export type SelectComponentsConfig<
 export const components = {
   ClearIndicator: ClearIndicator,
   Control: Control,
+  DummyInput: DummyInput,
   DropdownIndicator: DropdownIndicator,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
diff --git a/packages/react-select/src/index.ts b/packages/react-select/src/index.ts
index 312aab9f03..93ef2ffd6b 100644
--- a/packages/react-select/src/index.ts
+++ b/packages/react-select/src/index.ts
@@ -24,6 +24,7 @@ export type {
   ValueContainerProps,
 } from './components/containers';
 export type { ControlProps } from './components/Control';
+export type { DummyInputProps } from './components/DummyInput';
 export type { GroupProps, GroupHeadingProps } from './components/Group';
 export type {
   ClearIndicatorProps,
diff --git a/packages/react-select/src/internal/DummyInput.tsx b/packages/react-select/src/internal/DummyInput.tsx
deleted file mode 100644
index 0d73c9d313..0000000000
--- a/packages/react-select/src/internal/DummyInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/** @jsx jsx */
-import { JSX, Ref } from 'react';
-import { jsx } from '@emotion/react';
-import { removeProps } from '../utils';
-
-export default function DummyInput({
-  innerRef,
-  ...props
-}: JSX.IntrinsicElements['input'] & {
-  readonly innerRef: Ref<HTMLInputElement>;
-}) {
-  // Remove animation props not meant for HTML elements
-  const filteredProps = removeProps(
-    props,
-    'onExited',
-    'in',
-    'enter',
-    'exit',
-    'appear'
-  );
-
-  return (
-    <input
-      ref={innerRef}
-      {...filteredProps}
-      css={{
-        label: 'dummyInput',
-        // get rid of any default styles
-        background: 0,
-        border: 0,
-        // important! this hides the flashing cursor
-        caretColor: 'transparent',
-        fontSize: 'inherit',
-        gridArea: '1 / 1 / 2 / 3',
-        outline: 0,
-        padding: 0,
-        // important! without `width` browsers won't allow focus
-        width: 1,
-
-        // remove cursor on desktop
-        color: 'transparent',
-
-        // remove cursor on mobile whilst maintaining "scroll into view" behaviour
-        left: -100,
-        opacity: 0,
-        position: 'relative',
-        transform: 'scale(.01)',
-      }}
-    />
-  );
-}
diff --git a/packages/react-select/src/internal/index.ts b/packages/react-select/src/internal/index.ts
index 77823425dc..d321045508 100644
--- a/packages/react-select/src/internal/index.ts
+++ b/packages/react-select/src/internal/index.ts
@@ -1,4 +1,3 @@
 export { default as A11yText } from './A11yText';
-export { default as DummyInput } from './DummyInput';
 export { default as ScrollManager } from './ScrollManager';
 export { default as RequiredInput } from './RequiredInput';
diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index 0e0e1b863b..11f5efefa1 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -7,6 +7,7 @@ import {
   ValueContainerProps,
 } from './components/containers';
 import { ControlProps, css as controlCSS } from './components/Control';
+import { dummyInputCSS, DummyInputProps } from './components/DummyInput';
 import {
   groupCSS,
   groupHeadingCSS,
@@ -57,6 +58,7 @@ export interface StylesProps<
   clearIndicator: ClearIndicatorProps<Option, IsMulti, Group>;
   container: ContainerProps<Option, IsMulti, Group>;
   control: ControlProps<Option, IsMulti, Group>;
+  dummyInput: DummyInputProps<Option, IsMulti, Group>;
   dropdownIndicator: DropdownIndicatorProps<Option, IsMulti, Group>;
   group: GroupProps<Option, IsMulti, Group>;
   groupHeading: GroupHeadingProps<Option, IsMulti, Group>;
@@ -87,6 +89,7 @@ export const defaultStyles: {
   clearIndicator: clearIndicatorCSS,
   container: containerCSS,
   control: controlCSS,
+  dummyInput: dummyInputCSS,
   dropdownIndicator: dropdownIndicatorCSS,
   group: groupCSS,
   groupHeading: groupHeadingCSS,