diff --git a/frontend/src/components/annotation/CheckboxInput.vue b/frontend/src/components/annotation/CheckboxInput.vue
index 75cf2c41..b520af67 100644
--- a/frontend/src/components/annotation/CheckboxInput.vue
+++ b/frontend/src/components/annotation/CheckboxInput.vue
@@ -13,7 +13,8 @@
         :state="state"
         v-for="(option, idx) in options"
         >
-        {{ option.text }}
+        <span v-if="option.html" v-html="option.html"></span>
+        <span v-else>{{ option.text }}</span>
         <b-icon-question-circle v-if="option.helptext != null" :id="config.name + '__opt' + idx" class="annotation-help-prompt"></b-icon-question-circle>
         <b-tooltip v-if="option.helptext != null" :target="config.name + '__opt' + idx" :title="option.helptext"></b-tooltip>
       </b-form-checkbox>
diff --git a/frontend/src/components/annotation/RadioInput.vue b/frontend/src/components/annotation/RadioInput.vue
index bed7dc23..bbcb6b81 100644
--- a/frontend/src/components/annotation/RadioInput.vue
+++ b/frontend/src/components/annotation/RadioInput.vue
@@ -11,7 +11,8 @@
         :inline="config.orientation!=='vertical'"
         :name="config.name"
         >
-          {{ option.text }}
+          <span v-if="option.html" v-html="option.html"></span>
+          <span v-else>{{ option.text }}</span>
           <b-icon-question-circle v-if="option.helptext != null" :id="config.name + '__opt' + idx" class="annotation-help-prompt"></b-icon-question-circle>
           <b-tooltip v-if="option.helptext != null" :target="config.name + '__opt' + idx" :title="option.helptext"></b-tooltip>
         </b-form-radio>
diff --git a/frontend/src/utils/annotations.js b/frontend/src/utils/annotations.js
index 10176d26..e42fde51 100644
--- a/frontend/src/utils/annotations.js
+++ b/frontend/src/utils/annotations.js
@@ -67,6 +67,7 @@ export function generateBVOptions(options, document) {
                 } else if ("value" in option) {
                     optionsList.push({
                         value: option.value,
+                        html: ("htmlLabel" in option ? option.htmlLabel : null),
                         text: ("label" in option ? option.label : option.value),
                         helptext: ("helptext" in option ? option.helptext : null),
                     })
diff --git a/frontend/tests/component/AnnotationRenderer.cy.js b/frontend/tests/component/AnnotationRenderer.cy.js
index 4294d357..6e5b54a3 100644
--- a/frontend/tests/component/AnnotationRenderer.cy.js
+++ b/frontend/tests/component/AnnotationRenderer.cy.js
@@ -244,6 +244,27 @@ describe("AnnotationRenderer", () => {
 
         })
 
+        it("htmlLabel wins over label if both are provided", () => {
+            const annotationComps = [
+                {
+                    name: "sentiment",
+                    type: "checkbox",
+                    options: [
+                        {value: "positive", label: "+ve", htmlLabel: "<span style='color:green'>Positive</span>"},
+                        {value: "neutral", label: "meh..."},
+                        {value: "negative", label: "-ve", htmlLabel: "<span style='color:red'>Negative</span>"},
+                    ],
+                }]
+
+            cy.mount(AnnotationRenderer, {propsData: {config: annotationComps}})
+
+            // the HTML label for (i.e. next sibling of) the positive option should be visible.
+            cy.get("[name='sentiment'][value='positive'] + label").contains("Positive").should("exist")
+            // but the text label should not
+            cy.get("[name='sentiment'][value='positive'] + label").contains("+ve").should("not.exist")
+
+        })
+
     })
 
     it('Test dynamic options fromDocument', () => {