digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
273 lines (272 loc) • 28.6 kB
JSON
{
"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>"
}
]
}