digitalmarketplace-frontend

{ "component": "question", "fixtures": [ { "name": "boolean default", "options": { "type": "boolean", "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>" }, { "name": "textbox large default", "options": { "type": "textbox_large", "question": { "id": "example", "question": "Here is the service question", "max_length_in_words": 500 } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>" }, { "name": "checkbox tree default", "options": { "type": "checkbox_tree", "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\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<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\" data-tier-restriction=\"\">\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 <details id=\"details-1\" class=\"dm-checkbox-tree-details\">\n <summary class=\"dm-checkbox-tree-details__summary\">\n <div class=\"dm-checkbox-tree-details__summary-text\">\n <div class=\"dm-checkbox-tree-details__summary-text-label\">\n Option set 1\n </div>\n <div class=\"dm-checkbox-tree-details__summary-text-count\">\n <strong class=\"govuk-tag govuk-tag--green govuk-visually-hidden\">\n <span class=\"dm-checkbox-tree-details__summary-text-count-selected\"></span> selected\n</strong>\n\n </div>\n </div>\n </summary>\n <div class=\"dm-checkbox-tree-details__text\">\n \n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" 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\n\n </div>\n </details>\n\n <details id=\"details-2\" class=\"dm-checkbox-tree-details\">\n <summary class=\"dm-checkbox-tree-details__summary\">\n <div class=\"dm-checkbox-tree-details__summary-text\">\n <div class=\"dm-checkbox-tree-details__summary-text-label\">\n Option set 2\n </div>\n <div class=\"dm-checkbox-tree-details__summary-text-count\">\n <strong class=\"govuk-tag govuk-tag--green govuk-visually-hidden\">\n <span class=\"dm-checkbox-tree-details__summary-text-count-selected\"></span> selected\n</strong>\n\n </div>\n </div>\n </summary>\n <div class=\"dm-checkbox-tree-details__text\">\n \n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" 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\n\n </div>\n </details>\n\n <details id=\"details-3\" class=\"dm-checkbox-tree-details\">\n <summary class=\"dm-checkbox-tree-details__summary\">\n <div class=\"dm-checkbox-tree-details__summary-text\">\n <div class=\"dm-checkbox-tree-details__summary-text-label\">\n Option set 3\n </div>\n <div class=\"dm-checkbox-tree-details__summary-text-count\">\n <strong class=\"govuk-tag govuk-tag--green govuk-visually-hidden\">\n <span class=\"dm-checkbox-tree-details__summary-text-count-selected\"></span> selected\n</strong>\n\n </div>\n </div>\n </summary>\n <div class=\"dm-checkbox-tree-details__text\">\n \n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" 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\n\n </div>\n </details>\n\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>" }, { "name": "checkbox tree large default", "options": { "type": "checkbox_tree_large", "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\n class=\"question \"\n id=\"example\"\n>\n \n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree-large\" aria-describedby=\"\">\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-large__summary govuk-grid-column-full\">\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>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" 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>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" 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>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" 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>\n\n</div>" }, { "name": "checkboxes default", "options": { "type": "checkboxes", "question": { "id": "example", "question": "Here is the service question", "options": [ { "label": "Option 1", "value": "option-1" }, { "label": "Option 2", "value": "option-2" }, { "label": "Option 3", "value": "option-3" } ] } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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>\n</fieldset>\n</div>\n\n\n</div>" }, { "name": "date default", "options": { "type": "date", "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" role=\"group\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-date-input\" id=\"input-example\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-day\" name=\"example-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-month\" name=\"example-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>" }, { "name": "list default", "options": { "type": "list", "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-0\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-1\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-2\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-3\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-4\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-5\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-6\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-7\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-8\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-9\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>" }, { "name": "number default", "options": { "type": "number", "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-example\" name=\"example\" type=\"text\">\n</div>\n\n\n</div>" }, { "name": "money default", "options": { "type": "money", "question": { "id": "example", "question": "Here is the service question\\", "unit": "£" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\\\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-example\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n\n</div>" }, { "name": "pricing default", "options": { "type": "pricing", "question": { "id": "example", "question": "Here is the pricing question", "fields": { "minimum_price": "examplePriceMin", "maximum_price": "examplePriceMax" } } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>\n\n</div>" }, { "name": "radios default", "options": { "type": "radios", "question": { "id": "example", "question": "Here is the service question", "options": [ { "label": "Option 1", "value": "option-1" }, { "label": "Option 2", "value": "option-2" }, { "label": "Option 3", "value": "option-3" } ] } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-3\" name=\"example\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>" }, { "name": "select default", "options": { "type": "select", "question": { "id": "example", "question": "Here is the service question", "options": [ { "label": "Option 1", "value": "option-1" }, { "label": "Option 2", "value": "option-2" }, { "label": "Option 3", "value": "option-3" } ] } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>\n\n\n</div>" }, { "name": "text default", "options": { "type": "text", "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\">\n</div>\n\n\n</div>" }, { "name": "upload default", "options": { "type": "upload", "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n </div>\n</div>\n\n\n</div>" }, { "name": "text with hidden", "options": { "type": "text", "question": { "id": "example", "question": "Here is the service question", "hidden": true } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"example\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\">\n</div>\n\n\n</div>" }, { "name": "multiquestion default", "options": { "type": "multiquestion", "question": { "id": "multiquestion", "questions": [ { "type": "text", "id": "multiquestionText", "question": "Here is the service question" }, {