{
    "component": "select-from-form",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "classes",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ]
                },
                "classes": "my-special-class"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select my-special-class\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "attributes",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ]
                },
                "attributes": {
                    "general": "kenobi",
                    "data-attribute": "Matthew"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\" general=\"kenobi\" data-attribute=\"Matthew\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with label as page heading",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ]
                },
                "label": {
                    "classes": "govuk-label--l",
                    "isPageHeading": true
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"select-1\">\n      Label text goes here\n    </label>\n  </h1>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with hint",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ],
                    "hint": "Hint text goes here"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <div id=\"select-1-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-hint\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with custom hint",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ],
                    "hint": "Hint text goes here"
                },
                "hint": {
                    "html": "<p>I am a custom hint</p>"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <div id=\"select-1-hint\" class=\"govuk-hint\">\n    <p>I am a custom hint</p>\n  </div>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-hint\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ],
                    "errors": [
                        "Please select an option"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <p id=\"select-1-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-error\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with hint and error message",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ],
                    "hint": "Hint text goes here",
                    "errors": [
                        "Please select an option"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <div id=\"select-1-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <p id=\"select-1-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-hint select-1-error\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with selected item",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ],
                    "data": 2
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
        },
        {
            "name": "with overwritten items",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1"
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3"
                        }
                    ]
                },
                "items": [
                    {
                        "value": 3,
                        "text": "GOV.UK frontend option 3"
                    },
                    {
                        "value": 1,
                        "text": "GOV.UK frontend option 1"
                    },
                    {
                        "value": 2,
                        "text": "GOV.UK frontend option 2"
                    }
                ]
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"3\">GOV.UK frontend option 3</option>\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
        },
        {
            "name": "with additionl item attributes",
            "options": {
                "form": {
                    "name": "select-1",
                    "question": "Label text goes here",
                    "options": [
                        {
                            "value": 1,
                            "label": "GOV.UK frontend option 1",
                            "attributes": {
                                "id": "value-for-1",
                                "data-test": "attribute for 1"
                            }
                        },
                        {
                            "value": 2,
                            "label": "GOV.UK frontend option 2"
                        },
                        {
                            "value": 3,
                            "label": "GOV.UK frontend option 3",
                            "disabled": true
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\" id=\"value-for-1\" data-test=\"attribute for 1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
        }
    ]
}