diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
new file mode 100644
index 00000000..381f3489
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -0,0 +1,170 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownQuestion from "./dropdown-question";
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn().mockImplementation(()=> {
+      return questionText;
+    })
+  }
+}
+
+// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
+// It is not being used.
+describe("dropdownQuestion.vue", () => {
+
+  it("Should render a select input", async () => {
+
+    // Arrange   
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.getCmsContent = jest.fn();
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.exists()).toBe(true);
+
+  });
+  
+  it("Should render the 'questionText' data value as the label text.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(questionText);
+
+  });
+
+  it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        disableAutoFill: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Mock CMS content ...
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
+    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q⁠uestion T⁠ext"
+    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(expectedQuestionText);
+
+  });
+  
+  it("Should return input id as the id of the select field", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes().id).toEqual("input ID");
+
+  });
+  
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.attributes("aria-label")).toContain(questionText);
+
+  });
+
+  it("Should return aria-disabled state as disabled", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        isDisabled: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes("aria-disabled")).toEqual("true");
+
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: "val",
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    await wrapper.find("select").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
+
+  it("Should call this.handleChange with new value when selectedOption is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: 0,
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+    // Act
+    wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
+
+    // Assert
+    expect(wrapper.vm.handleChange).toHaveBeenCalled;
+
+  });
+
+});
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
new file mode 100644
index 00000000..8e6ae0fa
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -0,0 +1,152 @@
+<template>
+	<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
+		<select v-model="selectedOption"
+				class="form-select" 
+				:id="inputId"
+				:name="inputId" 
+				:aria-disabled="isDisabled" 
+				:disabled="isDisabled" 
+				:aria-required="isRequired"
+				:validationRules="validationRules" 
+			>
+			<option v-for="(value, name, index) in options" :value="name" :key="index">
+				{{ value }}       
+			</option>
+		</select>
+		<div v-show="errorMessage" class="row mt-2 form-test-error">
+			<span role="alert">{{ errorMessage }}</span>
+		</div>	
+	</div>    
+</template>
+
+<script>
+import { useField } from "vee-validate";
+
+export default {
+	name: "dropdown-question",
+	props: {
+		modelValue: String,
+		inputId: String,
+		options: {
+			type: Object,
+			required: true
+		},
+		isDisabled: Boolean,
+		isRequired: Boolean,
+		disableAutoFill: Boolean,
+		validationRules: String, 
+		cmsWidgetName: String,
+	},
+	setup(props) {
+		const propsClone = Object.assign({}, props);
+		const modelValue = propsClone.modelValue;
+		let initialValue;
+
+		switch (typeof modelValue) {
+			case "number": 
+				initialValue = modelValue;
+				break;
+			default:
+				initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
+				break;
+		}
+
+		const fieldOptions = {
+			type: "select",
+			value: props.modelValue,
+			initialValue: initialValue, 
+		};
+
+		const {
+			errorMessage,
+			handleBlur,
+			handleChange,
+			meta,
+		} = useField(props.inputId, props.validationRules, fieldOptions);
+
+		return { 
+			errorMessage,
+			handleBlur,
+			handleChange,
+			meta, 
+		};
+	},  
+	computed: {
+		questionText(){
+			return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+		},
+		selectedOption: {
+			get: function() {
+				return this.modelValue;
+			},
+			set: function(newValue) {
+				this.$emit("update:modelValue", newValue);
+			}
+		}, 
+		labelText: {
+			get: function () {
+				const noBreakChar = "&NoBreak;";
+				var questionText = "";
+				if (this.disableAutoFill) {
+					var words = this.questionText.toString().split(/[ ]+/);
+					words.forEach(function (word) {
+						const position = 1;
+						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
+						questionText += `${word} `;					
+					});	
+					
+					questionText = questionText.trimEnd(); 
+				} else {
+					questionText = this.questionText.toString();
+				}
+
+				return questionText;
+			}
+		}
+	},
+	watch: {
+		selectedOption(newValue) {
+			this.handleChange(newValue);
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.dropdown-question {
+	label {
+		color: $black;
+		font-weight: 500; 
+	}
+	.form-label {
+		margin-bottom: .25rem;
+	}
+	.form-select {
+		color: $gray-600;
+		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+		border: 1px solid $gray-500;
+		border-radius: .5rem;
+		min-height: 3rem;
+		&:focus,
+		&:focus-visible {
+			box-shadow: 0 0 0 2.5px $blue;
+		}
+		&:disabled,
+		&.disabled {
+			background-color: $gray-100;
+			filter: grayscale(100%);
+			&:hover {
+				box-shadow: 0 0 0 4px transparent;
+				border: 1px solid $gray-500;
+			}
+		}
+		&:hover {
+			border: 1px solid $gray-500;
+			box-shadow: 0 0 0 4px $blue-300;
+		}
+	}
+}
+</style>
+
+