digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
72 lines • 170 kB
JSON
{
"component": "question-list",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-0\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-1\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-2\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-3\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-4\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-5\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-6\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-7\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-8\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-9\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with hint",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"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>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"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>"
},
{
"name": "with question advice and hint",
"options": {
"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": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"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>"
},
{
"name": "with optional",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"optional": true
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (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