ccs-digitalmarketplace-govuk-frontend
Version:
Digital Marketplace GOV.UK Frontend contains the code you need to start building a user interface for Digital Marketplace.
2,553 lines • 351 kB
JSON
{
"component": "question",
"fixtures": [
{
"name": "text default",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"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": "text with hint",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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 id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "text with question advice",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question",
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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 id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "text with question advice and hint",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question",
"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": "",
"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 id=\"input-example-hint\" 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 <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "text with optional",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question",
"optional": true
}
},
"hidden": false,
"description": "",
"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 (optional)\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\">\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": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "text with data",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "Here is the value"
}
},
"hidden": false,
"description": "",
"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\" value=\"Here is the value\">\n</div>\n\n\n</div>"
},
{
"name": "text with error message",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
},
"errors": {
"example": {
"message": "You must enter into the text field"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the text field\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "text with hint and error message",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must enter into the text field"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the text field\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-hint input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "text with previous framework",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "Here is the value"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" value=\"Here is the value\" aria-describedby=\"input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "text with previous framework without data",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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": "text with previous framework and error message",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "Here is the value"
},
"errors": {
"example": {
"message": "You must enter into the text field"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the text field\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" value=\"Here is the value\" aria-describedby=\"input-example-error\">\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": "",
"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 <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": "pricing with question advice",
"options": {
"type": "pricing",
"question": {
"id": "example",
"question": "Here is the pricing question",
"question_advice": "Here is the question advice",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax"
}
}
},
"hidden": false,
"description": "",
"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 <p class=\"govuk-body\">\n Here is the question advice\n </p>\n\n <div class=\"govuk-form-group\">\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": "pricing with all parts",
"options": {
"type": "pricing",
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax",
"price_unit": "examplePriceUnit",
"price_interval": "examplePriceInterval"
}
}
},
"hidden": false,
"description": "",
"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 <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceUnit\" name=\"examplePriceUnit\">\n <option value=\"\"></option>\n <option value=\"Unit\">a unit</option>\n <option value=\"Licence\">a licence</option>\n <option value=\"User\">a user</option>\n <option value=\"Device\">a device</option>\n <option value=\"Instance\">a instance</option>\n <option value=\"Server\">a server</option>\n <option value=\"Virtual machine\">a virtual machine</option>\n <option value=\"Transaction\">a transaction</option>\n <option value=\"Megabyte\">a megabyte</option>\n <option value=\"Gigabyte\">a gigabyte</option>\n <option value=\"Terabyte\">a terabyte</option>\n </select>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceInterval\">\n Time\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceInterval\" name=\"examplePriceInterval\">\n <option value=\"\"></option>\n <option value=\"Second\">a second</option>\n <option value=\"Minute\">a minute</option>\n <option value=\"Hour\">a hour</option>\n <option value=\"Day\">a day</option>\n <option value=\"Week\">a week</option>\n <option value=\"Month\">a month</option>\n <option value=\"Quarter\">a quarter</option>\n <option value=\"6 months\">a 6 months</option>\n <option value=\"Year\">a year</option>\n </select>\n</div>\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": "pricing with optional fields",
"options": {
"type": "pricing",
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax",
"price_unit": "examplePriceUnit",
"price_interval": "examplePriceInterval"
},
"optional_fields": [
"maximum_price",
"price_interval"
]
}
},
"hidden": false,
"description": "",
"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 <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceUnit\" name=\"examplePriceUnit\">\n <option value=\"\"></option>\n <option value=\"Unit\">a unit</option>\n <option value=\"Licence\">a licence</option>\n <option value=\"User\">a user</option>\n <option value=\"Device\">a device</option>\n <option value=\"Instance\">a instance</option>\n <option value=\"Server\">a server</option>\n <option value=\"Virtual machine\">a virtual machine</option>\n <option value=\"Transaction\">a transaction</option>\n <option value=\"Megabyte\">a megabyte</option>\n <option value=\"Gigabyte\">a gigabyte</option>\n <option value=\"Terabyte\">a terabyte</option>\n </select>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceInterval\">\n Time (optional)\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceInterval\" name=\"examplePriceInterval\">\n <option value=\"\"></option>\n <option value=\"Second\">a second</option>\n <option value=\"Minute\">a minute</option>\n <option value=\"Hour\">a hour</option>\n <option value=\"Day\">a day</option>\n <option value=\"Week\">a week</option>\n <option value=\"Month\">a month</option>\n <option value=\"Quarter\">a quarter</option>\n <option value=\"6 months\">a 6 months</option>\n <option value=\"Year\">a year</option>\n </select>\n</div>\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 (optional)\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": "pricing with data",
"options": {
"type": "pricing",
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax",
"price_unit": "examplePriceUnit",
"price_interval": "examplePriceInterval"
}
},
"data": {
"examplePriceMin": 199.99,
"examplePriceUnit": "Unit"
}
},
"hidden": false,
"description": "",
"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 <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceUnit\" name=\"examplePriceUnit\">\n <option value=\"\"></option>\n <option value=\"Unit\" selected>a unit</option>\n <option value=\"Licence\">a licence</option>\n <option value=\"User\">a user</option>\n <option value=\"Device\">a device</option>\n <option value=\"Instance\">a instance</option>\n <option value=\"Server\">a server</option>\n <option value=\"Virtual machine\">a virtual machine</option>\n <option value=\"Transaction\">a transaction</option>\n <option value=\"Megabyte\">a megabyte</option>\n <option value=\"Gigabyte\">a gigabyte</option>\n <option value=\"Terabyte\">a terabyte</option>\n </select>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceInterval\">\n Time\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceInterval\" name=\"examplePriceInterval\">\n <option value=\"\"></option>\n <option value=\"Second\">a second</option>\n <option value=\"Minute\">a minute</option>\n <option value=\"Hour\">a hour</option>\n <option value=\"Day\">a day</option>\n <option value=\"Week\">a week</option>\n <option value=\"Month\">a month</option>\n <option value=\"Quarter\">a quarter</option>\n <option value=\"6 months\">a 6 months</option>\n <option value=\"Year\">a year</option>\n </select>\n</div>\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\" value=\"199.99\" 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": "pricing with error message",
"options": {
"type": "pricing",
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax"
}
},
"errors": {
"example": {
"message": "You must enter some values"
}
}
},
"hidden": false,
"description": "",
"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 govuk-form-group--error\">\n <p id=\"input-example\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter some values\n</p>\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": "upload default",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"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 <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n</div>\n\n\n</div>"
},
{
"name": "upload with hint",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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 <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "upload with question advice",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question",
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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 <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\n <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "upload with hidden",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question",
"hidden": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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 <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n</div>\n\n\n</div>"
},
{
"name": "upload with data",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "https://example.come/123456-document-2022-07-29-0000.pdf"
}
},
"hidden": false,
"description": "",
"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 <div id=\"input-example-hint\" class=\"govuk-hint\">\n <ul class=\"dm-document-upload-list\">\n <li class=\"dm-document-list-item\">\n <span class=\"dm-document-upload-with-icon\">\n <span class=\"dm-document-icon\"></span>\n Document uploaded Friday 29 July 2022 at 1:00am BST\n </span>\n </li>\n </ul>\n </div>\n <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "upload with question advice, hint and data",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question",
"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"
},
"data": {
"example": "https://example.come/123456-document-2022-07-29-0000.pdf"
}
},
"hidden": false,
"description": "",
"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 <div id=\"input-example-hint\" 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 \n \n <ul class=\"dm-document-upload-list\">\n <li class=\"dm-document-list-item\">\n <span class=\"dm-document-upload-with-icon\">\n <span class=\"dm-document-icon\"></span>\n Document uploaded Friday 29 July 2022 at 1:00am BST\n </span>\n </li>\n </ul>\n </div>\n <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "upload with error message",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
},
"errors": {
"example": {
"message": "You must upload a file"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must upload a file\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "upload with hint and error message",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must upload a file"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must upload a file\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "upload with previous framework",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "https://example.come/123456-document-2022-07-29-0000.pdf"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <ul class=\"dm-document-upload-list\">\n <li class=\"dm-document-list-item\">\n <span class=\"dm-document-upload-with-icon\">\n <span class=\"dm-document-icon\"></span>\n Document uploaded Friday 29 July 2022 at 1:00am BST\n </span>\n </li>\n </ul>\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "upload with previous framework without data",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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 <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n</div>\n\n\n</div>"
},
{
"name": "upload with previous framework and error message",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "https://example.come/123456-document-2022-07-29-0000.pdf"
},
"errors": {
"example": {
"message": "You must upload a file"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <ul class=\"dm-document-upload-list\">\n <li class=\"dm-document-list-item\">\n <span class=\"dm-document-upload-with-icon\">\n <span class=\"dm-document-icon\"></span>\n Document uploaded Friday 29 July 2022 at 1:00am BST\n </span>\n </li>\n </ul>\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must upload a file\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "number default",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"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": "number with hint",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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 id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-hint\">\n</div>\n\n\n</div>"
},
{
"name": "number with hidden",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question",
"hidden": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "number with data",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": 25
}
},
"hidden": false,
"description": "",
"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\" value=\"25\">\n</div>\n\n\n</div>"
},
{
"name": "number with error message",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
},
"errors": {
"example": {
"message": "You must enter into the number field"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the number field\n </p>\n <input class=\"govuk-input govuk-input--width-5 govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "number with hint and error message",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must enter into the number field"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the number field\n </p>\n <input class=\"govuk-input govuk-input--width-5 govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" aria-describedby=\"input-example-hint input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "number with previous framework",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": 25
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\n <input class=\"govuk-input govuk-input--width-5 govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" value=\"25\" aria-describedby=\"input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "number with previous framework without data",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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": "number with previous framework and error message",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": 25
},
"errors": {
"example": {
"message": "You must enter into the number field"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the number field\n </p>\n <input class=\"govuk-input govuk-input--width-5 govuk-input--error\" id=\"input-example\" name=\"example\" type=\"text\" value=\"25\" aria-describedby=\"input-example-error\">\n</div>\n\n\n</div>"
},
{
"name": "number with prefix",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question",
"unit": "£",
"unit_position": "before"
}
},
"hidden": false,
"description": "",
"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 class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-example\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n\n</div>"
},
{
"name": "number with suffix",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question",
"unit": "%",
"unit_position": "after"
}
},
"hidden": false,
"description": "",
"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 class=\"govuk-input__wrapper\">\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-example\" name=\"example\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">%</div>\n </div>\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": "",
"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": "textbox large with hint",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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 <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint\"></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": "textbox large with question advice",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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 <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint\"></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": "textbox large with question advice and hint",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"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": "",
"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 <div id=\"input-example-hint\" 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 <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint\"></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": "textbox large with hidden",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "textbox large with data",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"data": {
"example": "Here is the value"
}
},
"hidden": false,
"description": "",
"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\">Here is the value</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": "textbox large with error message",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"errors": {
"example": {
"message": "You must enter into the textarea field"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error 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 <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the textarea field\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-error\"></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": "textbox large with hint and error message",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must enter into the textarea field"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error 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 <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the textarea field\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint input-example-error\"></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": "textbox large with previous framework",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"data": {
"example": "Here is the value"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error govuk-character-count dm-form-group--declaration-reuse\" 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 <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-error\">Here is the value</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": "textbox large with previous framework without data",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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": "textbox large with previous framework and error message",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"data": {
"example": "Here is the value"
},
"errors": {
"example": {
"message": "You must enter into the textarea field"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error 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 <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the textarea field\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-error\">Here is the value</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": "date default",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"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": "date with hint",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\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": "date with question advice",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question",
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\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": "date with question advice and hint",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question",
"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": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" 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 <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": "date with optional",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question",
"optional": true
}
},
"hidden": false,
"description": "",
"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 (optional)\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": "date with hidden",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question",
"hidden": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "date with data",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "2023--25"
}
},
"hidden": false,
"description": "",
"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\" value=\"25\" 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\" value=\"\" 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\" value=\"2023\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "date with error message",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
},
"errors": {
"example": {
"message": "You must enter a valid date"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter a valid date\n </p>\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 govuk-input--error\" 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 govuk-input--error\" 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 govuk-input--error\" 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": "date with hint and error message",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must enter a valid date"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-hint input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter a valid date\n </p>\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 govuk-input--error\" 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 govuk-input--error\" 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 govuk-input--error\" 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": "date with previous framework",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "2023-12-25"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\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 govuk-input--error\" id=\"input-example-day\" name=\"example-day\" type=\"text\" value=\"25\" 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 govuk-input--error\" id=\"input-example-month\" name=\"example-month\" type=\"text\" value=\"12\" 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 govuk-input--error\" id=\"input-example-year\" name=\"example-year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "date with previous framework without data",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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": "date with previous framework and error message",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": "2023-12-25"
},
"errors": {
"example": {
"message": "You must enter a valid date"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter a valid date\n </p>\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 govuk-input--error\" id=\"input-example-day\" name=\"example-day\" type=\"text\" value=\"25\" 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 govuk-input--error\" id=\"input-example-month\" name=\"example-month\" type=\"text\" value=\"12\" 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 govuk-input--error\" id=\"input-example-year\" name=\"example-year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\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": "",
"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": "radios without value",
"options": {
"type": "radios",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1"
},
{
"label": "Option 2"
},
{
"label": "Option 3"
}
]
}
},
"hidden": false,
"description": "",
"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": "radios with description",
"options": {
"type": "radios",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1",
"description": "Description of option 1"
},
{
"label": "Option 2",
"value": "option-2",
"description": "Description of option 2"
},
{
"label": "Option 3",
"value": "option-3",
"description": "Description of option 3"
}
]
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n <div id=\"input-example-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Description of option 1\n </div>\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\" aria-describedby=\"input-example-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n <div id=\"input-example-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Description of option 2\n </div>\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\" aria-describedby=\"input-example-3-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n <div id=\"input-example-3-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Description of option 3\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "radios with hint",
"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"
}
],
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\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": "radios with question advice",
"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"
}
],
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\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": "radios with question advice and hint",
"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"
}
],
"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": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" 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 <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": "radios with hidden",
"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": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "radios with data",
"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"
}
]
},
"data": {
"example": "option-2"
}
},
"hidden": false,
"description": "",
"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\" checked>\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": "radios with error message",
"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"
}
]
},
"errors": {
"example": {
"message": "You must select an option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\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": "radios with hint and error message",
"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"
}
],
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must select an option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\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": "radios with previous framework",
"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"
}
]
},
"data": {
"example": "option-2"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\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\" checked>\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": "radios with previous framework without data",
"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"
}
]
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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": "radios with previous framework and error message",
"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"
}
]
},
"data": {
"example": "option-2"
},
"errors": {
"example": {
"message": "You must select an option"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\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\" checked>\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": "boolean default",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"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": "boolean with hint",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\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": "boolean with question advice",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question",
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\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": "boolean with question advice and hint",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question",
"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": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" 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 <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": "boolean with hidden",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question",
"hidden": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "boolean with data",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": true
}
},
"hidden": false,
"description": "",
"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\" checked>\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": "boolean with error message",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
},
"errors": {
"example": {
"message": "You must select an option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\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": "boolean with hint and error message",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must select an option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\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": "boolean with previous framework",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": true
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\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\" checked>\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": "boolean with previous framework without data",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"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": "boolean with previous framework and error message",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": true
},
"errors": {
"example": {
"message": "You must select an option"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\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\" checked>\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": "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": "",
"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": "checkboxes without value",
"options": {
"type": "checkboxes",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1"
},
{
"label": "Option 2"
},
{
"label": "Option 3"
}
]
}
},
"hidden": false,
"description": "",
"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": "checkboxes with description",
"options": {
"type": "checkboxes",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1",
"description": "Description of option 1"
},
{
"label": "Option 2",
"value": "option-2",
"description": "Description of option 2"
},
{
"label": "Option 3",
"value": "option-3",
"description": "Description of option 3"
}
]
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n Option 1\n </label>\n <div id=\"input-example-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Description of option 1\n </div>\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\" aria-describedby=\"input-example-2-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option 2\n </label>\n <div id=\"input-example-2-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Description of option 2\n </div>\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\" aria-describedby=\"input-example-3-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 3\n </label>\n <div id=\"input-example-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Description of option 3\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "checkboxes with hint",
"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"
}
],
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\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": "checkboxes with question advice",
"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"
}
],
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\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": "checkboxes with question advice and hint",
"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"
}
],
"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": "",
"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\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" 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 <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": "checkboxes with optional",
"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"
}
],
"optional": true
}
},
"hidden": false,
"description": "",
"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 (optional)\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": "checkboxes with hidden",
"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": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\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": "checkboxes with data",
"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"
}
]
},
"data": {
"example": [
"option-1",
"option-2"
]
}
},
"hidden": false,
"description": "",
"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\" checked>\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\" checked>\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": "checkboxes with error message",
"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"
}
]
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select at least one option\n </p>\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": "checkboxes with hint and error message",
"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"
}
],
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select at least one option\n </p>\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": "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": "",
"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\" data-module=\"dm-checkbox-tree\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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>\n\n</div>"
},
{
"name": "checkbox tree with one option",
"options": {
"type": "checkbox_tree",
"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": "",
"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\" data-module=\"dm-checkbox-tree\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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>\n\n</div>"
},
{
"name": "checkbox tree with data",
"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"
}
]
}
]
},
"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": "",
"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\" data-module=\"dm-checkbox-tree\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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>\n\n</div>"
},
{
"name": "checkbox tree with overlapping options",
"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 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": "",
"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\" data-module=\"dm-checkbox-tree\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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>\n\n</div>"
},
{
"name": "checkbox tree with error message",
"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"
}
]
}
]
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-checkbox-tree\" aria-describedby=\"input-example\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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>\n\n</div>"
},
{
"name": "list default",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"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-list\" 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": "list with hint",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"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-list\" aria-describedby=\"example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n</div>\n\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": "list with question advice",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question",
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"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-list\" aria-describedby=\"example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n</div>\n\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": "list with question advice and hint",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question",
"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": "",
"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-list\" aria-describedby=\"example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"example-hint\" 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=\"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": "list with optional",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question",
"optional": true
}
},
"hidden": false,
"description": "",
"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-list\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (optional)\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": "list with hidden",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question",
"hidden": true
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-list\" 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": "list with data",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": [
"Here is the first list item",
"Here is the second list item",
"Here is the third list item"
]
}
},
"hidden": false,
"description": "",
"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-list\" 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\" value=\"Here is the first list item\">\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\" value=\"Here is the second list item\">\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\" value=\"Here is the third list item\">\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": "list with data and one item",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": [
"Here is the only list item"
]
}
},
"hidden": false,
"description": "",
"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-list\" 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\" value=\"Here is the only list item\">\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": "list with data and ten items",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question"
},
"data": {
"example": [
"Here is item 1",
"Here is item 2",
"Here is item 3",
"Here is item 4",
"Here is item 5",
"Here is item 6",
"Here is item 7",
"Here is item 8",
"Here is item 9",
"Here is item 10"
]
}
},
"hidden": false,
"description": "",
"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-list\" 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\" value=\"Here is item 1\">\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\" value=\"Here is item 2\">\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\" value=\"Here is item 3\">\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\" value=\"Here is item 4\">\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\" value=\"Here is item 5\">\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\" value=\"Here is item 6\">\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\" value=\"Here is item 7\">\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\" value=\"Here is item 8\">\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\" value=\"Here is item 9\">\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\" value=\"Here is item 10\">\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": "list with error message",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question"
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-list\" aria-describedby=\"input-example\">\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=\"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": "list with hint and error message",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must select at least one option"
}
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-list\" aria-describedby=\"example-hint input-example\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"example-hint\" 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=\"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": "multiquestion default",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the service question"
},
{
"type": "radios",
"id": "multiquestionRadios",
"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"
}
]
},
{
"type": "textbox_large",
"id": "multiquestionTextbox",
"question": "Here is the service question",
"max_length_in_words": 500
}
]
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionRadios\"\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-multiquestionRadios\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-2\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-3\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionTextbox\"\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-multiquestionTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-multiquestionTextbox\" name=\"multiquestionTextbox\" rows=\"5\" aria-describedby=\"input-multiquestionTextbox-info\"></textarea>\n <div id=\"input-multiquestionTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "multiquestion within multiquestion",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"question": "Here is the multiquestion",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the text multiquestion"
},
{
"type": "multiquestion",
"id": "multiquestionInMultiquestion",
"question": "Here is the multiquestion within another multiquestion",
"questions": [
{
"type": "text",
"id": "innerMultiquestionText1",
"question": "Here is the inner multiquestion text 1"
},
{
"type": "text",
"id": "innerMultiquestionText2",
"question": "Here is the inner multiquestion text 2"
}
]
}
]
}
},
"hidden": false,
"description": "",
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the multiquestion\n </legend>\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the text multiquestion\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionInMultiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the multiquestion within another multiquestion\n </legend>\n <div\n class=\"question \"\n id=\"innerMultiquestionText1\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-innerMultiquestionText1\">\n Here is the inner multiquestion text 1\n </label>\n <input class=\"govuk-input\" id=\"input-innerMultiquestionText1\" name=\"innerMultiquestionText1\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"innerMultiquestionText2\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-innerMultiquestionText2\">\n Here is the inner multiquestion text 2\n </label>\n <input class=\"govuk-input\" id=\"input-innerMultiquestionText2\" name=\"innerMultiquestionText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>\n\n\n</fieldset>\n\n</div>"
}
]
}