{
  "component": "radios",
  "fixtures": [
    {
      "name": "plain radios",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ]
      },
      "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "small radios",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios tna-radios--small\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-ADM\" value=\"ADM\" name=\"type\"><label for=\"type-ADM\" class=\"tna-radios__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-AIR\" value=\"AIR\" name=\"type\"><label for=\"type-AIR\" class=\"tna-radios__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-BT\" value=\"BT\" name=\"type\"><label for=\"type-BT\" class=\"tna-radios__item-label\">Board of Trade and successors</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-C\" value=\"C\" name=\"type\"><label for=\"type-C\" class=\"tna-radios__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-CO\" value=\"CO\" name=\"type\"><label for=\"type-CO\" class=\"tna-radios__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-E\" value=\"E\" name=\"type\"><label for=\"type-E\" class=\"tna-radios__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-FO\" value=\"FO\" name=\"type\"><label for=\"type-FO\" class=\"tna-radios__item-label\">Foreign Office</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-HO\" value=\"HO\" name=\"type\"><label for=\"type-HO\" class=\"tna-radios__item-label\">Home Office</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-PROB\" value=\"PROB\" name=\"type\"><label for=\"type-PROB\" class=\"tna-radios__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-WO\" value=\"WO\" name=\"type\"><label for=\"type-WO\" class=\"tna-radios__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": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ],
        "selected": "image"
      },
      "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\" checked><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with a hint",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "hint": "You can only select one.",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\" aria-describedby=\"type-hint\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Type</span></legend><p id=\"type-hint\" class=\"tna-fieldset__hint\">You can only select one.</p><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with item hints",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio",
            "hint": "Includes music, speeches, and oral histories."
          },
          {
            "text": "Image",
            "value": "image",
            "hint": "Includes photographs, maps, and drawings."
          },
          {
            "text": "Video",
            "value": "video",
            "hint": "Includes films, documentaries, and newsreels."
          }
        ]
      },
      "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio<span class=\"tna-radios__item-hint\"><span class=\"tna-visually-hidden\">(</span>Includes music, speeches, and oral histories.<span class=\"tna-visually-hidden\">)</span></span></label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image<span class=\"tna-radios__item-hint\"><span class=\"tna-visually-hidden\">(</span>Includes photographs, maps, and drawings.<span class=\"tna-visually-hidden\">)</span></span></label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video<span class=\"tna-radios__item-hint\"><span class=\"tna-visually-hidden\">(</span>Includes films, documentaries, and newsreels.<span class=\"tna-visually-hidden\">)</span></span></label></div></div></div></fieldset></div>"
    },
    {
      "name": "with an error",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "error": {
          "text": "You must select a type"
        },
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ]
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint tna-fieldset--error\"><fieldset class=\"tna-fieldset__inner\" aria-describedby=\"type-error\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Type</span></legend><p id=\"type-error\" class=\"tna-fieldset__error\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a type</p><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "inline radios",
      "options": {
        "label": "Type",
        "headingSize": "xs",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ],
        "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios tna-radios--small tna-radios--inline\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "heading level",
      "options": {
        "label": "Type",
        "headingLevel": 4,
        "headingSize": "xs",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ]
      },
      "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\">Type</h4></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with classes",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ],
        "classes": "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" class=\"test-class\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" class=\"test-class\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" class=\"test-class\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with attributes",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ],
        "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\" data-testattribute=\"foobar\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\" data-testattribute=\"foobar\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\" data-testattribute=\"foobar\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with form group classes",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ],
        "formItemClasses": "test-class"
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint test-class\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    },
    {
      "name": "with form group attributes",
      "options": {
        "label": "Type",
        "headingSize": "m",
        "id": "type",
        "name": "type",
        "items": [
          {
            "text": "Audio",
            "value": "audio"
          },
          {
            "text": "Image",
            "value": "image"
          },
          {
            "text": "Video",
            "value": "video"
          }
        ],
        "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\">Type</span></legend><div class=\"tna-fieldset__body\"><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></div></fieldset></div>"
    }
  ]
}