digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
986 lines • 149 kB
JSON
{
"component": "question-checkbox-tree",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with one option",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 3,
"options": [
{
"label": "Option 1"
},
{
"label": "Option 2"
},
{
"label": "Option 3"
},
{
"label": "Option 4"
},
{
"label": "Option 5"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 3 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"Option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-4\" name=\"example\" type=\"checkbox\" value=\"Option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-4\">\n Option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-5\" name=\"example\" type=\"checkbox\" value=\"Option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-5\">\n Option 5\n </label>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with data",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
},
"data": {
"example": [
"Option set 1 option 1",
"Option set 1 option 4",
"Option set 3 option 2",
"Option set 3 option 3",
"Option set 3 option 4"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with hint",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
],
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-hint\">\n This is a hint for the question\n</div>\n\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
],
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n</div>\n\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with question advice and hint",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
],
"question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
"hint": "<div class=\"hint-in-html\">This is a hint for the question</div>\n"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-hint\">\n <div class=\"govuk-body\">\n <p class=\"govuk-body-l\">Here is the question advice</p>\n \n </div>\n <div class=\"hint-in-html\">This is a hint for the question</div>\n</div>\n\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with optional",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"optional": true,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (optional)\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with optional text",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"optional": true,
"optional_text": "if applicable",
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (if applicable)\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with overlapping options",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option 1"
},
{
"label": "Option 2"
},
{
"label": "Option 3"
},
{
"label": "Option 4"
},
{
"label": "Option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option 5"
},
{
"label": "Option 6"
},
{
"label": "Option 7"
},
{
"label": "Option 8"
},
{
"label": "Option 9"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option 9"
},
{
"label": "Option 10"
},
{
"label": "Option 11"
},
{
"label": "Option 12"
},
{
"label": "Option 13"
}
]
}
]
},
"data": {
"example": [
"Option 5",
"Option 8",
"Option 9"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option 5\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option 5\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option 5\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option 6\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option 6\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option 7\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option 7\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option 8\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option 8\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option 9\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option 9\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option 9\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 9\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option 10\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option 10\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option 11\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option 11\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option 12\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option 12\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option 13\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option 13\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "without number of items",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with item name",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"item_name": {
"singular": "capability",
"plural": "capabilities"
},
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"capability\" data-item-name-plural=\"capabilities\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 capabilities.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 capabilities<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 capabilities<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 capabilities<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with error message",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"input-example\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n <p id=\"input-example\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select at least one option\n</p>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with hint and error message",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
],
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"input-example\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-hint\">\n This is a hint for the question\n</div>\n\n\n <p id=\"input-example\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select at least one option\n</p>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n\n\n \n\n\n \n\n\n \n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-1\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-2\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-example-summary-3\">\n 5 categories<span class=\"dm-checkbox-tree__options-number-selected\"></span>\n </div>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>"
}
]
}