diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20e8e40120a0..8ea15f090de3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Theme] Use themes' definitions to render the initial view ([#4936](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4936))
 - [Theme] Make `next` theme the default ([#4854](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4854))
 - [Discover] Update embeddable for saved searches ([#5081](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5081))
+- Replace OuiSelect component with OuiSuperSelect in data-source plugin ([#5315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5315))
 - [Workspace] Add core workspace service module to enable the implementation of workspace features within OSD plugins ([#5092](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5092))
 
 ### 🐛 Bug Fixes
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index 3107ee84006a..86052cff8995 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -15,7 +15,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiPageContent,
-  EuiSelect,
+  EuiSuperSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -124,8 +124,7 @@ export class CreateDataSourceForm extends React.Component<
     });
   };
 
-  onChangeAuthType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const authType = e.target.value as AuthType;
+  onChangeAuthType = (authType: AuthType) => {
     this.setState({
       auth: {
         ...this.state.auth,
@@ -140,13 +139,13 @@ export class CreateDataSourceForm extends React.Component<
     });
   };
 
-  onChangeSigV4ServiceName = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  onChangeSigV4ServiceName = (service: SigV4ServiceName) => {
     this.setState({
       auth: {
         ...this.state.auth,
         credentials: {
           ...this.state.auth.credentials,
-          service: e.target.value as SigV4ServiceName,
+          service,
         },
       },
     });
@@ -425,10 +424,10 @@ export class CreateDataSourceForm extends React.Component<
                 defaultMessage: 'Service Name',
               })}
             >
-              <EuiSelect
+              <EuiSuperSelect
                 options={sigV4ServiceOptions}
-                value={this.state.auth.credentials.service}
-                onChange={(e) => this.onChangeSigV4ServiceName(e)}
+                valueOfSelected={this.state.auth.credentials.service}
+                onChange={(value) => this.onChangeSigV4ServiceName(value)}
                 name="ServiceName"
                 data-test-subj="createDataSourceFormSigV4ServiceTypeSelect"
               />
@@ -598,10 +597,10 @@ export class CreateDataSourceForm extends React.Component<
             {/* Credential source */}
             <EuiSpacer size="l" />
             <EuiFormRow>
-              <EuiSelect
+              <EuiSuperSelect
                 options={credentialSourceOptions}
-                value={this.state.auth.type}
-                onChange={(e) => this.onChangeAuthType(e)}
+                valueOfSelected={this.state.auth.type}
+                onChange={(value) => this.onChangeAuthType(value)}
                 name="Credential"
                 data-test-subj="createDataSourceFormAuthTypeSelect"
               />
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index e05813ca6f04..9af843a64071 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -17,7 +17,7 @@ import {
   EuiFormRow,
   EuiHorizontalRule,
   EuiPanel,
-  EuiSelect,
+  EuiSuperSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -166,8 +166,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     });
   };
 
-  onChangeAuthType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const authType = e.target.value as AuthType;
+  onChangeAuthType = (authType: AuthType) => {
     this.setState(
       {
         auth: {
@@ -241,13 +240,13 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     });
   };
 
-  onChangeSigV4ServiceName = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  onChangeSigV4ServiceName = (service: SigV4ServiceName) => {
     this.setState({
       auth: {
         ...this.state.auth,
         credentials: {
           ...this.state.auth.credentials,
-          service: e.target.value as SigV4ServiceName,
+          service,
         } as SigV4Content,
       },
     });
@@ -772,9 +771,9 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             defaultMessage: 'Credential',
           })}
         >
-          <EuiSelect
+          <EuiSuperSelect
             options={credentialSourceOptions}
-            value={this.state.auth.type}
+            valueOfSelected={this.state.auth.type}
             onChange={this.onChangeAuthType}
             name="Credential"
             data-test-subj="editDataSourceSelectAuthType"
@@ -827,10 +826,10 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             defaultMessage: 'Service Name',
           })}
         >
-          <EuiSelect
+          <EuiSuperSelect
             options={sigV4ServiceOptions}
-            value={this.state.auth.credentials?.service}
-            onChange={(e) => this.onChangeSigV4ServiceName(e)}
+            valueOfSelected={this.state.auth.credentials?.service}
+            onChange={(value) => this.onChangeSigV4ServiceName(value)}
             name="ServiceName"
             data-test-subj="editDataSourceFormSigV4ServiceTypeSelect"
           />
diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
index 1bede8fbfca9..d461daba82cc 100644
--- a/src/plugins/data_source_management/public/types.ts
+++ b/src/plugins/data_source_management/public/types.ts
@@ -61,19 +61,19 @@ export enum AuthType {
 export const credentialSourceOptions = [
   {
     value: AuthType.NoAuth,
-    text: i18n.translate('dataSourceManagement.credentialSourceOptions.NoAuthentication', {
+    inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.NoAuthentication', {
       defaultMessage: 'No authentication',
     }),
   },
   {
     value: AuthType.UsernamePasswordType,
-    text: i18n.translate('dataSourceManagement.credentialSourceOptions.UsernamePassword', {
+    inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.UsernamePassword', {
       defaultMessage: 'Username & Password',
     }),
   },
   {
     value: AuthType.SigV4,
-    text: i18n.translate('dataSourceManagement.credentialSourceOptions.AwsSigV4', {
+    inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.AwsSigV4', {
       defaultMessage: 'AWS SigV4',
     }),
   },
@@ -82,13 +82,13 @@ export const credentialSourceOptions = [
 export const sigV4ServiceOptions = [
   {
     value: SigV4ServiceName.OpenSearch,
-    text: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearch', {
+    inputDisplay: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearch', {
       defaultMessage: 'Amazon OpenSearch Service',
     }),
   },
   {
     value: SigV4ServiceName.OpenSearchServerless,
-    text: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearchServerless', {
+    inputDisplay: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearchServerless', {
       defaultMessage: 'Amazon OpenSearch Serverless',
     }),
   },