{
    "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=\"dm-option-select__filter js-dm-filter-options\">\n            <div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-visually-hidden\" for=\"input-filter-default\">\n    Filter Default\n  </label>\n  <input class=\"govuk-input dm-option-select__filter-input\" id=\"input-filter-default\" name=\"input-filter-default\" type=\"search\">\n</div>\n\n          </div>\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=\"dm-option-select__filter js-dm-filter-options\">\n            <div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-visually-hidden\" for=\"input-filter-collapsed\">\n    Filter Collapsed on load\n  </label>\n  <input class=\"govuk-input dm-option-select__filter-input\" id=\"input-filter-collapsed\" name=\"input-filter-collapsed\" type=\"search\">\n</div>\n\n          </div>\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>"
        },
        {
            "name": "with radios",
            "options": {
                "filter_settings": {
                    "filter_type": "radios"
                },
                "name": "with-radios",
                "title": "With radios",
                "items": [
                    {
                        "text": "Option 1",
                        "name": "option",
                        "value": "1"
                    },
                    {
                        "text": "Option 2",
                        "name": "option",
                        "value": "2"
                    },
                    {
                        "text": "Option 3",
                        "name": "option",
                        "value": "3"
                    },
                    {
                        "text": "Option 4",
                        "name": "option",
                        "value": "4"
                    },
                    {
                        "text": "Option 5",
                        "name": "option",
                        "value": "5"
                    }
                ],
                "optionsContainerId": "default-options"
            },
            "hidden": false,
            "description": "Options but with radios",
            "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-radios\">With radios</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-radios\" 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\n          <div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n    With radios\n  </legend>\n  <div class=\"govuk-radios govuk-radios--small\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"option\" name=\"option\" type=\"radio\" value=\"1\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"option\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"option-2\" name=\"option\" type=\"radio\" value=\"2\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"option-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"option-3\" name=\"option\" type=\"radio\" value=\"3\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"option-3\">\n        Option 3\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"option-4\" name=\"option\" type=\"radio\" value=\"4\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"option-4\">\n        Option 4\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"option-5\" name=\"option\" type=\"radio\" value=\"5\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"option-5\">\n        Option 5\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>\n\n        </div>\n      </div>\n  </div>"
        },
        {
            "name": "with hidden",
            "options": {
                "filter_settings": {
                    "filter_type": "hidden"
                },
                "name": "with-hidden",
                "title": "With hidden",
                "items": [
                    {
                        "text": "Option 1",
                        "name": "option-1",
                        "value": "1",
                        "checked": true
                    },
                    {
                        "text": "Option 2",
                        "name": "option-2",
                        "value": "2"
                    },
                    {
                        "text": "Option 3",
                        "name": "option-3",
                        "value": "3"
                    },
                    {
                        "text": "Option 4",
                        "name": "option-4",
                        "value": "4",
                        "checked": true
                    },
                    {
                        "text": "Option 5",
                        "name": "option-5",
                        "value": "5"
                    }
                ],
                "optionsContainerId": "default-options"
            },
            "hidden": false,
            "description": "Options but with hidden",
            "previewLayoutModifiers": [],
            "html": "<input type=\"hidden\" name=\"option-1\" value=\"1\" class=\"dm-option-select__hidden\"/>\n      <input type=\"hidden\" name=\"option-4\" value=\"4\" class=\"dm-option-select__hidden\"/>"
        },
        {
            "name": "with filter",
            "options": {
                "name": "filtered",
                "title": "With a filter",
                "items": [
                    {
                        "text": "Apple",
                        "name": "apple",
                        "value": "apple"
                    },
                    {
                        "text": "Banana",
                        "name": "banana",
                        "value": "banana"
                    },
                    {
                        "text": "Cherry",
                        "name": "cherry",
                        "value": "cherry"
                    },
                    {
                        "text": "Date",
                        "name": "date",
                        "value": "date"
                    },
                    {
                        "text": "Elderberry",
                        "name": "elderberry",
                        "value": "elderberry"
                    },
                    {
                        "text": "Fig",
                        "name": "fig",
                        "value": "fig"
                    },
                    {
                        "text": "Grape",
                        "name": "grape",
                        "value": "grape"
                    }
                ],
                "optionsContainerId": "filtered-options"
            },
            "hidden": false,
            "description": "An option select with a filter",
            "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-filtered\">With a filter</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-filtered\" class=\"dm-option-select__container dm-option-select__container--filter js-options-container\" id=\"filtered-options\" tabindex=\"-1\">\n        <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n          <div class=\"dm-option-select__filter js-dm-filter-options\">\n            <div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-visually-hidden\" for=\"input-filter-filtered\">\n    Filter With a filter\n  </label>\n  <input class=\"govuk-input dm-option-select__filter-input\" id=\"input-filter-filtered\" name=\"input-filter-filtered\" type=\"search\">\n</div>\n\n          </div>\n          <div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n    With a filter\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=\"filtered\" name=\"apple\" type=\"checkbox\" value=\"apple\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered\">\n        Apple\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"filtered-2\" name=\"banana\" type=\"checkbox\" value=\"banana\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered-2\">\n        Banana\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"filtered-3\" name=\"cherry\" type=\"checkbox\" value=\"cherry\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered-3\">\n        Cherry\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"filtered-4\" name=\"date\" type=\"checkbox\" value=\"date\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered-4\">\n        Date\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"filtered-5\" name=\"elderberry\" type=\"checkbox\" value=\"elderberry\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered-5\">\n        Elderberry\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"filtered-6\" name=\"fig\" type=\"checkbox\" value=\"fig\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered-6\">\n        Fig\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"filtered-7\" name=\"grape\" type=\"checkbox\" value=\"grape\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"filtered-7\">\n        Grape\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>\n\n        </div>\n      </div>\n  </div>"
        }
    ]
}