From 4c9db59f16ba5f7d508f109dcd7381760cfeeebd Mon Sep 17 00:00:00 2001
From: Ian Roberts <i.roberts@dcs.shef.ac.uk>
Date: Sun, 3 Nov 2024 00:31:40 +0000
Subject: [PATCH] docs: documentation for htmlLabel option

---
 .../docs/manageradminguide/config_examples.js | 12 +++++++
 docs/docs/manageradminguide/project_config.md | 32 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/docs/docs/manageradminguide/config_examples.js b/docs/docs/manageradminguide/config_examples.js
index d6e40454..1b88630f 100644
--- a/docs/docs/manageradminguide/config_examples.js
+++ b/docs/docs/manageradminguide/config_examples.js
@@ -145,6 +145,18 @@ export default {
             "valError": "Error message when field fails is validation" //Optional
         }
     ],
+    configHtmlLabels: [
+        {
+            "name": "sentiment",
+            "type": "checkbox",
+            "title": "Sentiment",
+            "options": [
+                {"value": "positive", "htmlLabel": "<span style='color: green'>Positive</span>"},
+                {"value": "neutral", "htmlLabel": "<span style='font-style: italic'>Neutral</span> or uncertain"},
+                {"value": "positive", "htmlLabel": "<span style='color: red'>Negative</span>"}
+            ]
+        },
+    ],
     configSelector: [
         {
             "name": "mylabel",
diff --git a/docs/docs/manageradminguide/project_config.md b/docs/docs/manageradminguide/project_config.md
index d3d4ea3d..e89df6dc 100644
--- a/docs/docs/manageradminguide/project_config.md
+++ b/docs/docs/manageradminguide/project_config.md
@@ -348,6 +348,38 @@ If your documents are plain text and include line breaks that need to be preserv
 
 </AnnotationRendererPreview>
 
+### Richer labels for radios & checkboxes
+
+The `label` of radio and checkbox inputs is normally plain text, however both input types support an `htmlLabel` property as an alternative to `label`, which allows for HTML tags within the option label.  The `htmlLabel` is rendered within a `<span></span>` inside the `<label>` element for the option, so it should be limited to presentational tags such as `<em>`, `<b>`, `<tt>`, or custom CSS directives via `<span style='...'>` or `<div style='...'>`.  In particular a `<div style='margin-bottom: 1.5em'>` is a convenient way to break up a long list of radio buttons (with `"orientation": "vertical"`) into logical sections.
+
+<AnnotationRendererPreview :config="configs.configHtmlLabels">
+
+```json
+[
+  {
+    "name": "sentiment",
+    "type": "checkbox",
+    "title": "Sentiment",
+    "options": [
+      {
+        "value": "positive",
+        "htmlLabel": "<span style='color: green'>Positive</span>"
+      },
+      {
+        "value": "neutral",
+        "htmlLabel": "<span style='font-style: italic'>Neutral</span> or uncertain"
+      },
+      {
+        "value": "positive",
+        "htmlLabel": "<span style='color: red'>Negative</span>"
+      }
+    ]
+  }
+]
+```
+
+</AnnotationRendererPreview>
+
 ### Selector input
 
 <AnnotationRendererPreview :config="configs.configSelector">