diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31d65e5cf6bd..e185f3eac3c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### 📈 Features/Enhancements
 
 - Add support for read-only mode through tenants ([#4498](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4498))
+- 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))
 - [Workspace] Setup workspace skeleton and implement basic CRUD API ([#5075](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5075))
 - [Decouple] Add new cross compatibility check core service which export functionality for plugins to verify if their OpenSearch plugin counterpart is installed on the cluster or has incompatible version to configure the plugin behavior([#4710](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4710))
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx
index ad1d02c87db4..c3c34cbdab1d 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx
@@ -53,11 +53,8 @@ describe('Datasource Management: Create Datasource form', () => {
   };
 
   const setAuthTypeValue = (testSubjId: string, value: string) => {
-    component.find(testSubjId).last().simulate('change', {
-      target: {
-        value,
-      },
-    });
+    component.find(testSubjId).last().simulate('click');
+    component.find({ id: value }).last().simulate('click');
   };
 
   beforeEach(() => {
@@ -103,7 +100,7 @@ describe('Datasource Management: Create Datasource form', () => {
 
     const { authType, username, password } = getFields(component);
 
-    expect(authType.prop('value')).toBe(AuthType.NoAuth);
+    expect(authType.prop('valueOfSelected')).toBe(AuthType.NoAuth);
     expect(username.exists()).toBeFalsy(); // username field does not exist when No Auth option is selected
     expect(password.exists()).toBeFalsy(); // password field does not exist when No Auth option is selected
   });
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.test.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
index 41133f65035a..c57b5b414ed3 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
@@ -50,11 +50,8 @@ describe('Datasource Management: Edit Datasource Form', () => {
   };
 
   const setAuthTypeValue = (testSubjId: string, value: string) => {
-    component.find(testSubjId).last().simulate('change', {
-      target: {
-        value,
-      },
-    });
+    component.find(testSubjId).last().simulate('click');
+    component.find({ id: value }).last().simulate('click');
   };
 
   describe('Case 1: With Username & Password', () => {
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',
     }),
   },