diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
index 602ed2987457..837ae3d4c8be 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
@@ -77,12 +77,12 @@ const CURRENT_YEAR = new Date().getUTCFullYear();
 
 export interface IngestionSpec {
   readonly type: IngestionType;
+  readonly id?: string;
   readonly spec: IngestionSpecInner;
   readonly context?: { useConcurrentLocks?: boolean };
   readonly suspended?: boolean;
 
   // Added by the server
-  readonly id?: string;
   readonly groupId?: string;
   readonly resource?: any;
 }
diff --git a/web-console/src/helpers/spec-conversion.ts b/web-console/src/helpers/spec-conversion.ts
index 84ccb7bcb385..8246b7d2add0 100644
--- a/web-console/src/helpers/spec-conversion.ts
+++ b/web-console/src/helpers/spec-conversion.ts
@@ -51,6 +51,10 @@ export function getSpecDatasourceName(spec: Partial<IngestionSpec>): string | un
   return deepGet(spec, 'spec.dataSchema.dataSource');
 }
 
+export function getSpecSupervisorId(spec: Partial<IngestionSpec>): string | undefined {
+  return typeof spec.id === 'string' ? spec.id : getSpecDatasourceName(spec);
+}
+
 function convertFilter(filter: any): SqlExpression {
   switch (filter.type) {
     case 'selector':
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 88694367baad..f20b42bcb0bc 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -143,7 +143,7 @@ import {
   updateSchemaWithSample,
   upgradeSpec,
 } from '../../druid-models';
-import { getSpecDatasourceName } from '../../helpers';
+import { getSpecDatasourceName, getSpecSupervisorId } from '../../helpers';
 import { getLink } from '../../links';
 import { Api, AppToaster, UrlBaser } from '../../singletons';
 import {
@@ -3386,6 +3386,20 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                   </>
                 ),
               },
+              {
+                name: 'id',
+                label: 'Supervisor ID',
+                type: 'string',
+                defined: isStreamingSpec,
+                placeholder: '(default to the datasource name if not set)',
+                info: (
+                  <p>
+                    The ID of the supervisor that will manage the ingestion. This should generally
+                    be set to the datasource name (the default if left unset) unless you are setting
+                    up multiple supervisors for the same datasource.
+                  </p>
+                ),
+              },
               {
                 name: 'spec.ioConfig.appendToExisting',
                 label: 'Append to existing',
@@ -3568,7 +3582,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     }
 
     let currentSupervisorSpec: Partial<IngestionSpec> | undefined;
-    const supervisorId = getSpecDatasourceName(spec);
+    const supervisorId = getSpecSupervisorId(spec);
     if (isStreamingSpec(spec) && supervisorId) {
       try {
         currentSupervisorSpec = cleanSpec(