{
  "name": "Date input",
  "component": "date-input",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example"
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "disabled",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "disabled input",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "year": {
          "disabled": true
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "disabled input (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2
          },
          {
            "name": "month",
            "width": 2
          },
          {
            "name": "year",
            "width": 4,
            "disabled": true
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "disabled with enabled input",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "disabled": true,
        "year": {
          "disabled": false
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" disabled inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "day and month",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your birthday?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 5 12"
        },
        "id": "example",
        "year": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your birthday?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 5 12\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "day and month (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your birthday?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 5 12"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2
          },
          {
            "name": "month",
            "width": 2
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your birthday?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 5 12\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "day and month (with empty item)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your birthday?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 5 12"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2
          },
          {
            "name": "month",
            "width": 2
          },
          false
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your birthday?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 5 12\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "legend",
      "description": "with size S",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "s",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "custom-size"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"custom-size-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--s\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"custom-size-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"custom-size\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"custom-size-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "legend",
      "description": "with size M",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "m",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "custom-size"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"custom-size-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--m\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"custom-size-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"custom-size\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"custom-size-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "legend",
      "description": "with size L",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "custom-size"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"custom-size-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"custom-size-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"custom-size\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"custom-size-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "legend",
      "description": "with size XL",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "xl",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "custom-size"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"custom-size-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--xl\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"custom-size-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"custom-size\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"custom-size-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"custom-size-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"custom-size-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "month and year",
      "context": {
        "fieldset": {
          "legend": {
            "text": "When did you start your job?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 11 2023"
        },
        "id": "example",
        "day": false
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        When did you start your job?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 11 2023\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "month and year (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "When did you start your job?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 11 2023"
        },
        "id": "example",
        "items": [
          {
            "name": "month",
            "width": 2
          },
          {
            "name": "year",
            "width": 4
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        When did you start your job?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 11 2023\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "month and year (with empty item)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "When did you start your job?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 11 2023"
        },
        "id": "example",
        "items": [
          false,
          {
            "name": "month",
            "width": 2
          },
          {
            "name": "year",
            "width": 4
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        When did you start your job?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 11 2023\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "month and year with fields",
      "context": {
        "fieldset": {
          "legend": {
            "text": "When did you start your job?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 11 2023"
        },
        "id": "example",
        "day": false,
        "month": {
          "value": "11"
        },
        "year": {
          "value": "2023"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        When did you start your job?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 11 2023\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"11\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "month and year with fields overriding values",
      "context": {
        "fieldset": {
          "legend": {
            "text": "When did you start your job?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 11 2023"
        },
        "id": "example",
        "day": false,
        "month": {
          "value": "11"
        },
        "year": {
          "value": "2023"
        },
        "values": {
          "month": "8",
          "year": "2024"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        When did you start your job?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 11 2023\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"11\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"2023\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "month and year with values",
      "context": {
        "fieldset": {
          "legend": {
            "text": "When did you start your job?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 11 2023"
        },
        "id": "example",
        "day": false,
        "values": {
          "month": "8",
          "year": "2024"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        When did you start your job?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 11 2023\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"8\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"2024\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with autocomplete values",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "day": {
          "autocomplete": "bday-day"
        },
        "month": {
          "autocomplete": "bday-month"
        },
        "year": {
          "autocomplete": "bday-year"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with autocomplete values (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2,
            "autocomplete": "bday-day"
          },
          {
            "name": "month",
            "width": 2,
            "autocomplete": "bday-month"
          },
          {
            "name": "year",
            "width": 4,
            "autocomplete": "bday-year"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with custom name prefix",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "namePrefix": "example"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"example[day]\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"example[month]\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"example[year]\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error message",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "errorMessage": {
          "text": "Enter your date of birth"
        },
        "id": "example"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter your date of birth\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error message and hint",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Enter your date of birth"
        },
        "id": "example"
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter your date of birth\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error on day input",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Date of birth must include a day"
        },
        "id": "example",
        "day": {
          "error": true
        },
        "month": {
          "value": "3"
        },
        "year": {
          "value": "1980"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Date of birth must include a day\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"3\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error on day input (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Date of birth must include a day"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2,
            "error": true
          },
          {
            "name": "month",
            "value": "3",
            "width": 2
          },
          {
            "name": "year",
            "value": "1980",
            "width": 4
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Date of birth must include a day\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"3\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error on month input",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Date of birth must include a month"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2,
            "value": "31"
          },
          {
            "name": "month",
            "width": 2,
            "error": true
          },
          {
            "name": "year",
            "width": 4,
            "value": "1980"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Date of birth must include a month\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" value=\"31\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error on month input (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Date of birth must include a month"
        },
        "id": "example",
        "day": {
          "value": "31"
        },
        "month": {
          "error": true
        },
        "year": {
          "value": "1980"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Date of birth must include a month\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" value=\"31\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"1980\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error on year input",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Date of birth must include a year"
        },
        "id": "example",
        "day": {
          "value": "31"
        },
        "month": {
          "value": "3"
        },
        "year": {
          "error": true
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Date of birth must include a year\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" value=\"31\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"3\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with error on year input (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "errorMessage": {
          "text": "Date of birth must include a year"
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2,
            "value": "31"
          },
          {
            "name": "month",
            "width": 2,
            "value": "3"
          },
          {
            "name": "year",
            "width": 4,
            "error": true
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint example-error\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <span class=\"nhsuk-error-message\" id=\"example-error\">\n      <span class=\"nhsuk-u-visually-hidden\">Error:</span> Date of birth must include a year\n    </span>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" value=\"31\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"3\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with errors only",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "id": "example",
        "day": {
          "error": true
        },
        "month": {
          "error": true
        },
        "year": {
          "error": true
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with errors only (using items)",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "id": "example",
        "items": [
          {
            "name": "day",
            "width": 2,
            "error": true
          },
          {
            "name": "month",
            "width": 2,
            "error": true
          },
          {
            "name": "year",
            "width": 4,
            "error": true
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group nhsuk-form-group--error\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--error nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "without page heading",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?"
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend\">\n      What is your date of birth?\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with translations",
      "context": {
        "fieldset": {
          "legend": {
            "text": "Beth yw eich dyddiad geni?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "Er enghraifft, 31 3 1980"
        },
        "id": "example",
        "day": {
          "label": {
            "text": "Dydd"
          }
        },
        "month": {
          "label": {
            "text": "Mis"
          }
        },
        "year": {
          "label": {
            "text": "Blwyddyn"
          }
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        Beth yw eich dyddiad geni?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      Er enghraifft, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Dydd\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Mis\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Blwyddyn\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    },
    {
      "name": "with values",
      "context": {
        "fieldset": {
          "legend": {
            "text": "What is your date of birth?",
            "size": "l",
            "isPageHeading": true
          }
        },
        "hint": {
          "text": "For example, 31 3 1980"
        },
        "id": "example",
        "values": {
          "day": "5",
          "month": "8",
          "year": "2024"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group\">\n  <fieldset class=\"nhsuk-fieldset\" role=\"group\" aria-describedby=\"example-hint\">\n    <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n      <h1 class=\"nhsuk-fieldset__heading\">\n        What is your date of birth?\n      </h1>\n    </legend>\n    <div class=\"nhsuk-hint\" id=\"example-hint\">\n      For example, 31 3 1980\n    </div>\n    <div class=\"nhsuk-date-input\" id=\"example\">\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-day\">\n            Day\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-day\" name=\"day\" type=\"text\" value=\"5\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-month\">\n            Month\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input\" id=\"example-month\" name=\"month\" type=\"text\" value=\"8\" inputmode=\"numeric\">\n        </div>\n      </div>\n      <div class=\"nhsuk-date-input__item\">\n        <div class=\"nhsuk-form-group\">\n          <label class=\"nhsuk-label nhsuk-date-input__label\" for=\"example-year\">\n            Year\n          </label>\n          <input class=\"nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input\" id=\"example-year\" name=\"year\" type=\"text\" value=\"2024\" inputmode=\"numeric\">\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
    }
  ]
}