{
  "component": "checkboxes",
  "fixtures": [
    {
      "name": "plain checkboxes",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "small checkboxes",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Admiralty, Navy, Royal Marines, and Coastguard",
            "value": "ADM"
          },
          {
            "text": "Air Ministry and Royal Air Force records",
            "value": "AIR"
          },
          {
            "text": "Board of Trade and successors",
            "value": "BT"
          },
          {
            "text": "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
            "value": "C"
          },
          {
            "text": "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
            "value": "CO"
          },
          {
            "text": "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
            "value": "E"
          },
          {
            "text": "Foreign Office",
            "value": "FO"
          },
          {
            "text": "Home Office",
            "value": "HO"
          },
          {
            "text": "Prerogative Court of Canterbury",
            "value": "PROB"
          },
          {
            "text": "War Office, Armed Forces, Judge Advocate General, and related bodies",
            "value": "WO"
          }
        ],
        "small": true
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes tna-checkboxes--small\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with a preselected value",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta",
            "checked": true
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with a hint",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "hint": "Select all that apply.",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\" aria-describedby=\"categories-hint\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><p id=\"categories-hint\" class=\"tna-fieldset__hint\">Select all that apply.</p><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with item hints",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha",
            "hint": "This is the alpha hint."
          },
          {
            "text": "Beta",
            "value": "beta",
            "hint": "This is the beta hint."
          },
          {
            "text": "Gamma",
            "value": "gamma",
            "hint": "This is the gamma hint."
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha<span class=\"tna-checkboxes__item-hint\"><span class=\"tna-visually-hidden\">(</span>This is the alpha hint.<span class=\"tna-visually-hidden\">)</span></span></label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta<span class=\"tna-checkboxes__item-hint\"><span class=\"tna-visually-hidden\">(</span>This is the beta hint.<span class=\"tna-visually-hidden\">)</span></span></label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma<span class=\"tna-checkboxes__item-hint\"><span class=\"tna-visually-hidden\">(</span>This is the gamma hint.<span class=\"tna-visually-hidden\">)</span></span></label></div></div></div></fieldset></div>"
    },
    {
      "name": "with an error",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "error": {
          "text": "You must select a category"
        },
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint tna-fieldset--error\"><fieldset class=\"tna-fieldset__inner\" aria-describedby=\"categories-error\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><p id=\"categories-error\" class=\"tna-fieldset__error\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "inline checkboxes",
      "options": {
        "label": "Categories",
        "headingSize": "xs",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ],
        "inline": true
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-xs\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "heading level",
      "options": {
        "label": "Categories",
        "headingLevel": 4,
        "headingSize": "xs",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><h4 class=\"tna-fieldset__heading tna-heading-xs\">Categories</h4></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "single item",
      "options": {
        "id": "terms",
        "name": "terms",
        "items": [
          {
            "text": "I agree to the terms and conditions",
            "value": "agree"
          }
        ]
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__body\"><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"terms\" value=\"agree\" name=\"terms\"><label for=\"terms\" class=\"tna-checkboxes__item-label\">I agree to the terms and conditions</label></div></div></div></div>"
    },
    {
      "name": "single item with label",
      "options": {
        "label": "Terms and conditions",
        "headingSize": "xs",
        "id": "terms",
        "name": "terms",
        "items": [
          {
            "text": "I agree to the terms and conditions",
            "value": "agree"
          }
        ]
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-xs\" for=\"terms\">Terms and conditions</label></div><div class=\"tna-form-item__body\"><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"terms\" value=\"agree\" name=\"terms\"><label for=\"terms\" class=\"tna-checkboxes__item-label\">I agree to the terms and conditions</label></div></div></div></div>"
    },
    {
      "name": "with classes",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ],
        "classes": "checkboxes__test-class"
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" class=\"checkboxes__test-class\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" class=\"checkboxes__test-class\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" class=\"checkboxes__test-class\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with attributes",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ],
        "attributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\" data-testattribute=\"foobar\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" data-testattribute=\"foobar\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\" data-testattribute=\"foobar\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with form group classes",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ],
        "formItemClasses": "checkboxes__test-class"
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint checkboxes__test-class\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with form group attributes",
      "options": {
        "label": "Categories",
        "headingSize": "m",
        "id": "categories",
        "name": "categories",
        "items": [
          {
            "text": "Alpha",
            "value": "alpha"
          },
          {
            "text": "Beta",
            "value": "beta"
          },
          {
            "text": "Gamma",
            "value": "gamma"
          }
        ],
        "formItemAttributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\" data-testattribute=\"foobar\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Categories</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></div></fieldset></div>"
    }
  ]
}