diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/constants.js b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/constants.js
index 852ef0c6283c9cb1a31c0ba1fbe123324f515e6e..881d84a7d6ee0ba941af1e72f69f2c8376e455dd 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/constants.js
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/constants.js
@@ -1,5 +1,6 @@
 export const SCOPED_LABEL_DELIMITER = '::';
 export const DEBOUNCE_DROPDOWN_DELAY = 200;
+export const DEFAULT_LABEL_COLOR = '#6699cc';
 
 export const DropdownVariant = {
   Sidebar: 'sidebar',
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue
index 1174ec3f01eced30a00939c4dd1047c5ba85ef73..30eeb0fbe316bc975ae0167825656b03a579efbc 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue
@@ -13,6 +13,7 @@ import { WORKSPACE_GROUP } from '~/issues/constants';
 import { __ } from '~/locale';
 import { workspaceLabelsQueries } from '../../../constants';
 import createLabelMutation from './graphql/create_label.mutation.graphql';
+import { DEFAULT_LABEL_COLOR } from './constants';
 
 const errorMessage = __('Error creating label.');
 
@@ -44,11 +45,16 @@ export default {
       type: String,
       required: true,
     },
+    searchKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
-      labelTitle: '',
-      selectedColor: '',
+      labelTitle: this.searchKey,
+      selectedColor: DEFAULT_LABEL_COLOR,
       labelCreateInProgress: false,
       error: undefined,
     };
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js
index 4ca0a813da26e38ea1bd8964f93ea831da59a687..9c8d96569553191b6b18083da5e0118dd647576a 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js
@@ -8,11 +8,13 @@ import { createAlert } from '~/alert';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
 import DropdownContentsCreateView from '~/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue';
 import createLabelMutation from '~/sidebar/components/labels/labels_select_widget/graphql/create_label.mutation.graphql';
+import { DEFAULT_LABEL_COLOR } from '~/sidebar/components/labels/labels_select_widget/constants';
 import {
   mockRegularLabel,
   mockSuggestedColors,
   createLabelSuccessfulResponse,
   workspaceLabelsQueryResponse,
+  workspaceLabelsQueryEmptyResponse,
 } from './mock_data';
 
 jest.mock('~/alert');
@@ -61,14 +63,16 @@ describe('DropdownContentsCreateView', () => {
     mutationHandler = createLabelSuccessHandler,
     labelCreateType = 'project',
     workspaceType = 'project',
+    labelsResponse = workspaceLabelsQueryResponse,
+    searchTerm = '',
   } = {}) => {
     const mockApollo = createMockApollo([[createLabelMutation, mutationHandler]]);
     mockApollo.clients.defaultClient.cache.writeQuery({
       query: workspaceLabelsQueries[workspaceType].query,
-      data: workspaceLabelsQueryResponse.data,
+      data: labelsResponse.data,
       variables: {
         fullPath: '',
-        searchTerm: '',
+        searchTerm,
       },
     });
 
@@ -94,7 +98,7 @@ describe('DropdownContentsCreateView', () => {
 
   it('selects a color after clicking on colored block', async () => {
     createComponent();
-    expect(findSelectedColor().attributes('style')).toBeUndefined();
+    expect(findSelectedColorText().attributes('value')).toBe(DEFAULT_LABEL_COLOR);
 
     findAllColors().at(0).vm.$emit('click', new Event('mouseclick'));
     await nextTick();
@@ -104,7 +108,7 @@ describe('DropdownContentsCreateView', () => {
 
   it('shows correct color hex code after selecting a color', async () => {
     createComponent();
-    expect(findSelectedColorText().attributes('value')).toBe('');
+    expect(findSelectedColorText().attributes('value')).toBe(DEFAULT_LABEL_COLOR);
 
     findAllColors().at(0).vm.$emit('click', new Event('mouseclick'));
     await nextTick();
@@ -123,6 +127,7 @@ describe('DropdownContentsCreateView', () => {
   it('disables a Create button if color is not set', async () => {
     createComponent();
     findLabelTitleInput().vm.$emit('input', 'Test title');
+    findSelectedColorText().vm.$emit('input', '');
     await nextTick();
 
     expect(findCreateButton().props('disabled')).toBe(true);
@@ -232,4 +237,21 @@ describe('DropdownContentsCreateView', () => {
       titleTakenError.data.labelCreate.errors[0],
     );
   });
+
+  describe('when empty labels response', () => {
+    it('is able to create label with searched text when empty response', async () => {
+      createComponent({ searchTerm: '', labelsResponse: workspaceLabelsQueryEmptyResponse });
+
+      findLabelTitleInput().vm.$emit('input', 'random');
+
+      findCreateButton().vm.$emit('click');
+      await waitForPromises();
+
+      expect(createLabelSuccessHandler).toHaveBeenCalledWith({
+        color: DEFAULT_LABEL_COLOR,
+        projectPath: '',
+        title: 'random',
+      });
+    });
+  });
 });
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/mock_data.js b/spec/frontend/sidebar/components/labels/labels_select_widget/mock_data.js
index 5d5a7e9a200359ad2eae7cd94071d1ec7032621c..b0b473625bb77e948007c74d93c0812a97145e1d 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/mock_data.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/mock_data.js
@@ -117,6 +117,17 @@ export const workspaceLabelsQueryResponse = {
   },
 };
 
+export const workspaceLabelsQueryEmptyResponse = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Project/126',
+      labels: {
+        nodes: [],
+      },
+    },
+  },
+};
+
 export const issuableLabelsQueryResponse = {
   data: {
     workspace: {