{
    "component": "option-select",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "name": "default",
                "title": "Default",
                "items": [
                    {
                        "text": "Option 1",
                        "name": "option-1",
                        "value": "1"
                    },
                    {
                        "text": "Option 2",
                        "name": "option-2",
                        "value": "2"
                    },
                    {
                        "text": "Option 3",
                        "name": "option-3",
                        "value": "3"
                    },
                    {
                        "text": "Option 4",
                        "name": "option-4",
                        "value": "4"
                    },
                    {
                        "text": "Option 5",
                        "name": "option-5",
                        "value": "5"
                    }
                ],
                "optionsContainerId": "default-options"
            },
            "hidden": false,
            "description": "A basic option select",
            "previewLayoutModifiers": [],
            "html": "<div \n    class=\"dm-option-select\"\n    data-module=\"dm-option-select\"\n>\n    <h2 class=\"dm-option-select__heading js-container-heading\">\n      <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-default\">Default</span>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n    </h2>\n\n    <div role=\"group\" aria-labelledby=\"option-select-title-default\" class=\"dm-option-select__container js-options-container\" id=\"default-options\" tabindex=\"-1\">\n      <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n      <div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n      Default\n    </legend>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"default\" name=\"option-1\" type=\"checkbox\" value=\"1\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"default\">\n          Option 1\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"default-2\" name=\"option-2\" type=\"checkbox\" value=\"2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-2\">\n          Option 2\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"default-3\" name=\"option-3\" type=\"checkbox\" value=\"3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-3\">\n          Option 3\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"default-4\" name=\"option-4\" type=\"checkbox\" value=\"4\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-4\">\n          Option 4\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"default-5\" name=\"option-5\" type=\"checkbox\" value=\"5\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-5\">\n          Option 5\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>\n\n      </div>\n    </div>\n</div>"
        },
        {
            "name": "with options collapsed",
            "options": {
                "name": "collapsed",
                "title": "Collapsed on load",
                "items": [
                    {
                        "text": "Option 1",
                        "name": "option-1",
                        "value": "1"
                    },
                    {
                        "text": "Option 2",
                        "name": "option-2",
                        "value": "2"
                    },
                    {
                        "text": "Option 3",
                        "name": "option-3",
                        "value": "3"
                    },
                    {
                        "text": "Option 4",
                        "name": "option-4",
                        "value": "4"
                    },
                    {
                        "text": "Option 5",
                        "name": "option-5",
                        "value": "5"
                    }
                ],
                "optionsContainerId": "collapsed-options",
                "closedOnLoad": true
            },
            "hidden": false,
            "description": "An option select with the property closed_on_load set to true should collapse by default.",
            "previewLayoutModifiers": [],
            "html": "<div \n    class=\"dm-option-select\"\n    data-module=\"dm-option-select\"\n data-closed-on-load=\"true\" >\n    <h2 class=\"dm-option-select__heading js-container-heading\">\n      <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-collapsed\">Collapsed on load</span>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n    </h2>\n\n    <div role=\"group\" aria-labelledby=\"option-select-title-collapsed\" class=\"dm-option-select__container js-options-container\" id=\"collapsed-options\" tabindex=\"-1\">\n      <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n      <div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n      Collapsed on load\n    </legend>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"collapsed\" name=\"option-1\" type=\"checkbox\" value=\"1\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed\">\n          Option 1\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"collapsed-2\" name=\"option-2\" type=\"checkbox\" value=\"2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-2\">\n          Option 2\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"collapsed-3\" name=\"option-3\" type=\"checkbox\" value=\"3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-3\">\n          Option 3\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"collapsed-4\" name=\"option-4\" type=\"checkbox\" value=\"4\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-4\">\n          Option 4\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"collapsed-5\" name=\"option-5\" type=\"checkbox\" value=\"5\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-5\">\n          Option 5\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>\n\n      </div>\n    </div>\n</div>"
        },
        {
            "name": "with few options",
            "options": {
                "name": "short",
                "title": "With few options",
                "items": [
                    {
                        "text": "Option 1",
                        "name": "option-1",
                        "value": "1"
                    },
                    {
                        "text": "Option 2",
                        "name": "option-2",
                        "value": "2"
                    }
                ],
                "optionsContainerId": "short-options"
            },
            "hidden": false,
            "description": "A short option select",
            "previewLayoutModifiers": [],
            "html": "<div \n    class=\"dm-option-select\"\n    data-module=\"dm-option-select\"\n>\n    <h2 class=\"dm-option-select__heading js-container-heading\">\n      <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-short\">With few options</span>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n    </h2>\n\n    <div role=\"group\" aria-labelledby=\"option-select-title-short\" class=\"dm-option-select__container js-options-container\" id=\"short-options\" tabindex=\"-1\">\n      <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n      <div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n      With few options\n    </legend>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"short\" name=\"option-1\" type=\"checkbox\" value=\"1\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"short\">\n          Option 1\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"short-2\" name=\"option-2\" type=\"checkbox\" value=\"2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"short-2\">\n          Option 2\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>\n\n      </div>\n    </div>\n</div>"
        },
        {
            "name": "with option pre checked",
            "options": {
                "name": "with_checked_value_set",
                "title": "List of options",
                "optionsContainerId": "list_of_vegetables",
                "items": [
                    {
                        "value": "potatoes",
                        "text": "Potatoes",
                        "checked": true
                    },
                    {
                        "value": "carrots",
                        "text": "Carrots",
                        "id": "carrots"
                    },
                    {
                        "value": "mash",
                        "text": "Mash",
                        "id": "mash"
                    }
                ]
            },
            "hidden": false,
            "description": "An option select with an option pre-checked",
            "previewLayoutModifiers": [],
            "html": "<div \n    class=\"dm-option-select\"\n    data-module=\"dm-option-select\"\n>\n    <h2 class=\"dm-option-select__heading js-container-heading\">\n      <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-with_checked_value_set\">List of options</span>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n      <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n    </h2>\n\n    <div role=\"group\" aria-labelledby=\"option-select-title-with_checked_value_set\" class=\"dm-option-select__container js-options-container\" id=\"list_of_vegetables\" tabindex=\"-1\">\n      <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n      <div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n      List of options\n    </legend>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with_checked_value_set\" name=\"with_checked_value_set\" type=\"checkbox\" value=\"potatoes\" checked>\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with_checked_value_set\">\n          Potatoes\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"carrots\" name=\"with_checked_value_set\" type=\"checkbox\" value=\"carrots\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"carrots\">\n          Carrots\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"mash\" name=\"with_checked_value_set\" type=\"checkbox\" value=\"mash\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"mash\">\n          Mash\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>\n\n      </div>\n    </div>\n</div>"
        }
    ]
}