{
    "component": "question-checkboxes",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "without value",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1"
                        },
                        {
                            "label": "Option 2"
                        },
                        {
                            "label": "Option 3"
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"Option 1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option 2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option 3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with divider",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "divider": "or"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__divider\">or</div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-4\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-4\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with description",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1",
                            "description": "Description of option 1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2",
                            "description": "Description of option 2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3",
                            "description": "Description of option 3"
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\" aria-describedby=\"input-example-item-hint\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n      <div id=\"input-example-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n        Description of option 1\n      </div>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\" aria-describedby=\"input-example-2-item-hint\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n      <div id=\"input-example-2-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n        Description of option 2\n      </div>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\" aria-describedby=\"input-example-3-item-hint\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n      <div id=\"input-example-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n        Description of option 3\n      </div>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with hint",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ],
                    "hint": "This is a hint for the question"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    This is a hint for the question\n  </div>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with question advice",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ],
                    "question_advice": "Here is the question advice"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <div class=\"govuk-body\">\n          Here is the question advice\n        </div>\n  </div>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with question advice and hint",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ],
                    "question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
                    "hint": "<div class=\"hint-in-html\">This is a hint for the question</div>\n"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <div class=\"govuk-body\">\n          <p class=\"govuk-body-l\">Here is the question advice</p>\n    \n        </div>\n        <div class=\"hint-in-html\">This is a hint for the question</div>\n  </div>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with optional",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ],
                    "optional": true
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question (optional)\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with optional text",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ],
                    "optional": true,
                    "optional_text": "if applicable"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question (if applicable)\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ]
                },
                "data": {
                    "example": [
                        "option-1",
                        "option-2"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\" checked>\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\" checked>\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ]
                },
                "errors": {
                    "example": {
                        "message": "You must select at least one option"
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <p id=\"input-example-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must select at least one option\n  </p>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        },
        {
            "name": "with hint and error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "options": [
                        {
                            "label": "Option 1",
                            "value": "option-1"
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2"
                        },
                        {
                            "label": "Option 3",
                            "value": "option-3"
                        }
                    ],
                    "hint": "This is a hint for the question"
                },
                "errors": {
                    "example": {
                        "message": "You must select at least one option"
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint input-example-error\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Here is the service question\n  </legend>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    This is a hint for the question\n  </div>\n  <p id=\"input-example-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must select at least one option\n  </p>\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n        Option 1\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n        Option 2\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n        Option 3\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>"
        }
    ]
}