{
    "component": "radios-from-form",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "form": {
                    "name": "example",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "inline",
            "options": {
                "form": {
                    "name": "example-inline",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ]
                },
                "classes": "govuk-radios--inline"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-inline\" name=\"example-inline\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-inline-2\" name=\"example-inline\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "attributes",
            "options": {
                "form": {
                    "name": "example-attributes",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ]
                },
                "attributes": {
                    "general": "kenobi",
                    "data-attribute": "Matthew"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div class=\"govuk-radios\" general=\"kenobi\" data-attribute=\"Matthew\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-attributes\" name=\"example-attributes\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-attributes\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-attributes-2\" name=\"example-attributes\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-attributes-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with legend as page heading",
            "options": {
                "form": {
                    "name": "example-inline",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ]
                },
                "fieldset": {
                    "legend": {
                        "classes": "govuk-fieldset__legend--l",
                        "isPageHeading": true
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n    <h1 class=\"govuk-fieldset__heading\">\n      Have you changed your name?\n    </h1>\n  </legend>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-inline\" name=\"example-inline\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-inline-2\" name=\"example-inline\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with hints on items",
            "options": {
                "form": {
                    "name": "example-with-hint-on-item",
                    "question": "How do you want to sign in?",
                    "options": [
                        {
                            "value": "gateway",
                            "label": "Sign in with Government Gateway",
                            "description": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
                        },
                        {
                            "value": "verify",
                            "label": "Sign in with GOV.UK Verify",
                            "description": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    How do you want to sign in?\n  </legend>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint-on-item\" name=\"example-with-hint-on-item\" type=\"radio\" value=\"gateway\" aria-describedby=\"input-example-with-hint-on-item-item-hint\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-on-item\">\n        Sign in with Government Gateway\n      </label>\n      <div id=\"input-example-with-hint-on-item-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n        You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n      </div>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint-on-item-2\" name=\"example-with-hint-on-item\" type=\"radio\" value=\"verify\" aria-describedby=\"input-example-with-hint-on-item-2-item-hint\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-on-item-2\">\n        Sign in with GOV.UK Verify\n      </label>\n      <div id=\"input-example-with-hint-on-item-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n      </div>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with hint",
            "options": {
                "form": {
                    "name": "example-with-hint",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ],
                    "hint": "This would likely have beend done through deed poll"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-hint-hint\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n    This would likely have beend done through deed poll\n  </div>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint\" name=\"example-with-hint\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint-2\" name=\"example-with-hint\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with custom hint",
            "options": {
                "form": {
                    "name": "example-with-hint",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ],
                    "hint": "This would likely have beend done through deed poll"
                },
                "hint": {
                    "html": "<p>I am a custom hint</p>"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-hint-hint\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n    <p>I am a custom hint</p>\n  </div>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint\" name=\"example-with-hint\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint-2\" name=\"example-with-hint\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "form": {
                    "name": "example-with-error",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ],
                    "errors": [
                        "Please select an option"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-error-error\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <p id=\"input-example-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n  </p>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-error\" name=\"example-with-error\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-error\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-error-2\" name=\"example-with-error\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-error-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with hint and error message",
            "options": {
                "form": {
                    "name": "example-with-hint-and-error",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ],
                    "hint": "This would likely have beend done through deed poll",
                    "errors": [
                        "Please select an option"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-hint-and-error-hint input-example-with-hint-and-error-error\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div id=\"input-example-with-hint-and-error-hint\" class=\"govuk-hint\">\n    This would likely have beend done through deed poll\n  </div>\n  <p id=\"input-example-with-hint-and-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n  </p>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint-and-error\" name=\"example-with-hint-and-error\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-and-error\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-hint-and-error-2\" name=\"example-with-hint-and-error\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-and-error-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with checked item",
            "options": {
                "form": {
                    "name": "example-with-checked-itemd",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ],
                    "data": false
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-checked-itemd\" name=\"example-with-checked-itemd\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-checked-itemd\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-checked-itemd-2\" name=\"example-with-checked-itemd\" type=\"radio\" value=\"false\" checked>\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-checked-itemd-2\">\n        No\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with overwritten items",
            "options": {
                "form": {
                    "name": "example-with-overwritten-items",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes"
                        },
                        {
                            "value": false,
                            "label": "No"
                        }
                    ]
                },
                "items": [
                    {
                        "text": "No",
                        "value": false
                    },
                    {
                        "text": "Yes",
                        "value": true
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-overwritten-items\" name=\"example-with-overwritten-items\" type=\"radio\" value=\"false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-overwritten-items\">\n        No\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-with-overwritten-items-2\" name=\"example-with-overwritten-items\" type=\"radio\" value=\"true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-overwritten-items-2\">\n        Yes\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with additionl item attributes",
            "options": {
                "form": {
                    "name": "example",
                    "question": "Have you changed your name?",
                    "options": [
                        {
                            "value": true,
                            "label": "Yes",
                            "id": "value-for-true",
                            "attributes": {
                                "data-test": "attribute for true"
                            }
                        },
                        {
                            "divider": "or"
                        },
                        {
                            "value": false,
                            "label": "No",
                            "id": "value-for-false",
                            "conditional": {
                                "html": "Is that so"
                            }
                        },
                        {
                            "value": "other",
                            "label": "Other",
                            "disabled": true
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Have you changed your name?\n  </legend>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"value-for-true\" name=\"example\" type=\"radio\" value=\"true\" data-test=\"attribute for true\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"value-for-true\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__divider\">or</div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"value-for-false\" name=\"example\" type=\"radio\" value=\"false\" data-aria-controls=\"conditional-value-for-false\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"value-for-false\">\n        No\n      </label>\n    </div>\n    <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-value-for-false\">\n      Is that so\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"input-example-4\" name=\"example\" type=\"radio\" value=\"other\" disabled>\n      <label class=\"govuk-label govuk-radios__label\" for=\"input-example-4\">\n        Other\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        }
    ]
}