{
    "component": "select-country-from-form",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "form": {
                    "name": "country"
                },
                "countries": [
                    [
                        "France",
                        "country:FR"
                    ],
                    [
                        "Germany",
                        "country:DE"
                    ],
                    [
                        "Italy",
                        "country:IT"
                    ],
                    [
                        "Span",
                        "country:ES"
                    ],
                    [
                        "United Kingdom",
                        "country:GB"
                    ],
                    [
                        "United States",
                        "country:US"
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-country\">\n    Country\n  </label>\n  <select class=\"govuk-select dm-select-country govuk-input--width-10\" id=\"input-country\" name=\"country\" data-module=\"dm-select-country-from-form\">\n    <option value=\"\" selected></option>\n    <option value=\"country:FR\">France</option>\n    <option value=\"country:DE\">Germany</option>\n    <option value=\"country:IT\">Italy</option>\n    <option value=\"country:ES\">Span</option>\n    <option value=\"country:GB\">United Kingdom</option>\n    <option value=\"country:US\">United States</option>\n  </select>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "form": {
                    "name": "country",
                    "errors": [
                        "You need to enter a country."
                    ]
                },
                "countries": [
                    [
                        "France",
                        "country:FR"
                    ],
                    [
                        "Germany",
                        "country:DE"
                    ],
                    [
                        "Italy",
                        "country:IT"
                    ],
                    [
                        "Span",
                        "country:ES"
                    ],
                    [
                        "United Kingdom",
                        "country:GB"
                    ],
                    [
                        "United States",
                        "country:US"
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-country\">\n    Country\n  </label>\n  <p id=\"input-country-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You need to enter a country.\n  </p>\n  <select class=\"govuk-select dm-select-country govuk-input--width-10 govuk-select--error\" id=\"input-country\" name=\"country\" aria-describedby=\"input-country-error\" data-module=\"dm-select-country-from-form\">\n    <option value=\"\" selected></option>\n    <option value=\"country:FR\">France</option>\n    <option value=\"country:DE\">Germany</option>\n    <option value=\"country:IT\">Italy</option>\n    <option value=\"country:ES\">Span</option>\n    <option value=\"country:GB\">United Kingdom</option>\n    <option value=\"country:US\">United States</option>\n  </select>\n</div>"
        },
        {
            "name": "with value",
            "options": {
                "form": {
                    "name": "country",
                    "data": "country:GB"
                },
                "countries": [
                    [
                        "France",
                        "country:FR"
                    ],
                    [
                        "Germany",
                        "country:DE"
                    ],
                    [
                        "Italy",
                        "country:IT"
                    ],
                    [
                        "Span",
                        "country:ES"
                    ],
                    [
                        "United Kingdom",
                        "country:GB"
                    ],
                    [
                        "United States",
                        "country:US"
                    ]
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-country\">\n    Country\n  </label>\n  <select class=\"govuk-select dm-select-country govuk-input--width-10\" id=\"input-country\" name=\"country\" data-module=\"dm-select-country-from-form\">\n    <option value=\"country:FR\">France</option>\n    <option value=\"country:DE\">Germany</option>\n    <option value=\"country:IT\">Italy</option>\n    <option value=\"country:ES\">Span</option>\n    <option value=\"country:GB\" selected>United Kingdom</option>\n    <option value=\"country:US\">United States</option>\n  </select>\n</div>"
        }
    ]
}