Checkbox/Radio Grouping

[freddyheppell]

Is your feature request related to a problem? Please describe.

Presenting annotators with a long list of options is difficult without structure.

Describe the solution you'd like

The option to group checkboxes/radio buttons into toggleable, non-selectable categories. This is definitely something I've seen before in other software, but couldn't find any examples off the top of my head, so made a rough mockup:

This could be specified with markup like:

"options": [
    {"value": "value1", "group": "Category 1", "label": "Option 1"},
    {"value": "value2", "group": "Category 1", "label": "Option 2"},
    {"value": "value3", "group": "Category 2", "label": "Option 3"},
   ...
],

Describe alternatives you've considered

A long list of unstructured options is hard to read.

Asking annotators to select a category and then using conditionals to show a question asking for a specific option is time-consuming to set up for large category sets. It also risks misleading annotators into thinking the category selection question actually matters, rather than just being a way to filter down options.

Additional context

This is related to @iabufarha's narrative annotation.

[ianroberts]

It doesn't give you collapsible groups, but with the merge of #412 you can use htmlLabel to get a decent amount of the way there. At the most basic you can use "htmlLabel":"<span class='tw-space-above-4'>Option 3</span>" to add space between groups, if you want to get more evil creative you can use the fact that the label element is position: relative and slide a heading into the gap:

{
  "value": "value3",
  "htmlLabel": "<div class='tw-space-above-4'><div style='position: absolute; top: -1.5em; left: -1.5em; white-space: nowrap; font-weight: bold'>Category 2:</div> Option 3</div>"
}

(top and left to move the heading into the space-above-4, white-space: nowrap because the width of the header div is the same as the width of the label and you want a header that is longer than the option label itself to overflow rather than wrap over two lines)