digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
334 lines (333 loc) • 24.2 kB
JSON
{
"component": "radios-from-form",
"fixtures": [
{
"name": "default",
"options": {
"form": {
"name": "example",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
]
}
},
"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 Have you changed your name?\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "inline",
"options": {
"form": {
"name": "example-inline",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
]
},
"classes": "govuk-radios--inline"
},
"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 Have you changed your name?\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-inline\" name=\"example-inline\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-inline-2\" name=\"example-inline\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "attributes",
"options": {
"form": {
"name": "example-attributes",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
]
},
"attributes": {
"general": "kenobi",
"data-attribute": "Matthew"
}
},
"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 Have you changed your name?\n </legend>\n <div class=\"govuk-radios\" general=\"kenobi\" data-attribute=\"Matthew\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-attributes\" name=\"example-attributes\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-attributes\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-attributes-2\" name=\"example-attributes\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-attributes-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with legend as page heading",
"options": {
"form": {
"name": "example-inline",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
]
},
"fieldset": {
"legend": {
"classes": "govuk-fieldset__legend--l",
"isPageHeading": 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--l\">\n <h1 class=\"govuk-fieldset__heading\">\n Have you changed your name?\n </h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-inline\" name=\"example-inline\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-inline-2\" name=\"example-inline\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-inline-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with hints on items",
"options": {
"form": {
"name": "example-with-hint-on-item",
"question": "How do you want to sign in?",
"options": [
{
"value": "gateway",
"label": "Sign in with Government Gateway",
"description": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
},
{
"value": "verify",
"label": "Sign in with GOV.UK Verify",
"description": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
}
]
}
},
"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 How do you want to sign in?\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint-on-item\" name=\"example-with-hint-on-item\" type=\"radio\" value=\"gateway\" aria-describedby=\"input-example-with-hint-on-item-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-on-item\">\n Sign in with Government Gateway\n </label>\n <div id=\"input-example-with-hint-on-item-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n </div>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint-on-item-2\" name=\"example-with-hint-on-item\" type=\"radio\" value=\"verify\" aria-describedby=\"input-example-with-hint-on-item-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-on-item-2\">\n Sign in with GOV.UK Verify\n </label>\n <div id=\"input-example-with-hint-on-item-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with hint",
"options": {
"form": {
"name": "example-with-hint",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
],
"hint": "This would likely have beend done through deed poll"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-hint-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Have you changed your name?\n </legend>\n <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n This would likely have beend done through deed poll\n </div>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint\" name=\"example-with-hint\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint-2\" name=\"example-with-hint\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with custom hint",
"options": {
"form": {
"name": "example-with-hint",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
],
"hint": "This would likely have beend done through deed poll"
},
"hint": {
"html": "<p>I am a custom hint</p>"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-hint-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Have you changed your name?\n </legend>\n <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n <p>I am a custom hint</p>\n </div>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint\" name=\"example-with-hint\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint-2\" name=\"example-with-hint\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with error message",
"options": {
"form": {
"name": "example-with-error",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
],
"errors": [
"Please select an option"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-error-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Have you changed your name?\n </legend>\n <p id=\"input-example-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-error\" name=\"example-with-error\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-error\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-error-2\" name=\"example-with-error\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-error-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with hint and error message",
"options": {
"form": {
"name": "example-with-hint-and-error",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
],
"hint": "This would likely have beend done through deed poll",
"errors": [
"Please select an option"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-with-hint-and-error-hint input-example-with-hint-and-error-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Have you changed your name?\n </legend>\n <div id=\"input-example-with-hint-and-error-hint\" class=\"govuk-hint\">\n This would likely have beend done through deed poll\n </div>\n <p id=\"input-example-with-hint-and-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint-and-error\" name=\"example-with-hint-and-error\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-and-error\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-hint-and-error-2\" name=\"example-with-hint-and-error\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-hint-and-error-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with checked item",
"options": {
"form": {
"name": "example-with-checked-itemd",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
],
"data": false
}
},
"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 Have you changed your name?\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-checked-itemd\" name=\"example-with-checked-itemd\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-checked-itemd\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-checked-itemd-2\" name=\"example-with-checked-itemd\" type=\"radio\" value=\"false\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-checked-itemd-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with overwritten items",
"options": {
"form": {
"name": "example-with-overwritten-items",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes"
},
{
"value": false,
"label": "No"
}
]
},
"items": [
{
"text": "No",
"value": false
},
{
"text": "Yes",
"value": 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 Have you changed your name?\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-overwritten-items\" name=\"example-with-overwritten-items\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-overwritten-items\">\n No\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-with-overwritten-items-2\" name=\"example-with-overwritten-items\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-with-overwritten-items-2\">\n Yes\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
},
{
"name": "with additionl item attributes",
"options": {
"form": {
"name": "example",
"question": "Have you changed your name?",
"options": [
{
"value": true,
"label": "Yes",
"id": "value-for-true",
"attributes": {
"data-test": "attribute for true"
}
},
{
"divider": "or"
},
{
"value": false,
"label": "No",
"id": "value-for-false",
"conditional": {
"html": "Is that so"
}
},
{
"value": "other",
"label": "Other",
"disabled": 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 Have you changed your name?\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"value-for-true\" name=\"example\" type=\"radio\" value=\"true\" data-test=\"attribute for true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"value-for-true\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__divider\">or</div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"value-for-false\" name=\"example\" type=\"radio\" value=\"false\" data-aria-controls=\"conditional-value-for-false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"value-for-false\">\n No\n </label>\n </div>\n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-value-for-false\">\n Is that so\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-4\" name=\"example\" type=\"radio\" value=\"other\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-4\">\n Other\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
}
]
}