{
"name": "Checkboxes",
"component": "checkboxes",
"fixtures": [
{
"name": "default",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "default",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
],
"small": true
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "disabled",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
},
"screenshot": true,
"options": {},
"html": ""
},
{
"name": "disabled",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
],
"small": true
},
"screenshot": true,
"options": {},
"html": ""
},
{
"name": "disabled input",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-input",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": true
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "disabled input",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-input",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": true
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "disabled with enabled input",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-enabled-input",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": false
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "disabled with enabled input",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-enabled-input",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": false
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "inline",
"context": {
"fieldset": {
"legend": {
"text": "Which nipple has changed?",
"size": "l",
"isPageHeading": true
}
},
"idPrefix": "inline",
"name": "example",
"inline": true,
"items": [
{
"value": "right",
"text": "Right nipple"
},
{
"value": "left",
"text": "Left nipple"
}
]
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "inline",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "Which nipple has changed?",
"size": "m",
"isPageHeading": true
}
},
"idPrefix": "inline",
"name": "example",
"inline": true,
"items": [
{
"value": "right",
"text": "Right nipple"
},
{
"value": "left",
"text": "Left nipple"
}
],
"small": true
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "legend",
"description": "with size S",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "s"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "legend",
"description": "with size M",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "legend",
"description": "with size L",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "legend",
"description": "with size XL",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "xl"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with conditional content",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with conditional content",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with conditional content, error message",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you like to be contacted"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with conditional content, error message",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you like to be contacted"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with conditional content, error message (nested)",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "example",
"values": [
"phone"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n \n Error: Enter your phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
]
},
"screenshot": {
"states": [
"focus"
],
"selector": "#conditional-2",
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "with conditional content, error message (nested)",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "example",
"values": [
"phone"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n \n Error: Enter your phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
],
"small": true
},
"screenshot": {
"states": [
"focus"
],
"selector": "#conditional-2",
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "with conditional content, special characters",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "user.profile[contact-prefs]",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
]
},
"screenshot": false,
"options": {
"hidden": true
},
"html": ""
},
{
"name": "with conditional content, special characters",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "user.profile[contact-prefs]",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
],
"small": true
},
"screenshot": false,
"options": {
"hidden": true
},
"html": ""
},
{
"name": "with error message",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-error-message",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": {
"states": [
"focus"
],
"selector": "#with-error-message",
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "with error message",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-error-message",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
},
"screenshot": {
"states": [
"focus"
],
"selector": "#with-error-message",
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "with error message and hint",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with error message and hint",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with hint",
"context": {
"fieldset": {
"legend": {
"text": "What medical conditions do you have?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with hint",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "What medical conditions do you have?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes"
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with hints on items",
"context": {
"fieldset": {
"legend": {
"text": "What medical conditions do you have?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint-item",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes",
"hint": {
"text": "including type 1, type 2, and gestational diabetes"
}
}
]
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "with hints on items",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "What medical conditions do you have?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint-item",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes",
"hint": {
"text": "including type 1, type 2, and gestational diabetes"
}
}
],
"small": true
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {},
"html": ""
},
{
"name": "with long text",
"context": {
"fieldset": {
"legend": {
"text": "Venenatis Condimentum",
"size": "l",
"isPageHeading": true
}
},
"idPrefix": "with-long-text",
"name": "example",
"items": [
{
"value": "nullam",
"text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\nquam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\nMaecenas faucibus mollis interdum. Donec id elit non mi porta gravida\nat eget metus."
},
{
"value": "aenean",
"text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\nvestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\nnisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus\nmus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\nvenenatis vestibulum. Cras mattis consectetur purus sit amet\nfermentum."
},
{
"value": "fusce",
"text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\nnibh, ut fermentum massa justo sit amet risus. Etiam porta sem\nmalesuada magna mollis euismod. Praesent commodo cursus magna, vel\nscelerisque nisl consectetur et. Etiam porta sem malesuada magna\nmollis euismod. Etiam porta sem malesuada magna mollis euismod.\nDonec sed odio dui. Sed posuere consectetur est at lobortis."
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with long text",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "Venenatis Condimentum",
"size": "m",
"isPageHeading": true
}
},
"idPrefix": "with-long-text",
"name": "example",
"items": [
{
"value": "nullam",
"text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\nquam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\nMaecenas faucibus mollis interdum. Donec id elit non mi porta gravida\nat eget metus."
},
{
"value": "aenean",
"text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\nvestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\nnisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus\nmus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\nvenenatis vestibulum. Cras mattis consectetur purus sit amet\nfermentum."
},
{
"value": "fusce",
"text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\nnibh, ut fermentum massa justo sit amet risus. Etiam porta sem\nmalesuada magna mollis euismod. Praesent commodo cursus magna, vel\nscelerisque nisl consectetur et. Etiam porta sem malesuada magna\nmollis euismod. Etiam porta sem malesuada magna mollis euismod.\nDonec sed odio dui. Sed posuere consectetur est at lobortis."
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with \"none of the above\" option",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"idPrefix": "conditional",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
},
{
"divider": "or"
},
{
"value": "none",
"text": "None of the above",
"exclusive": true
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with \"none of the above\" option",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"idPrefix": "conditional",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
},
{
"divider": "or"
},
{
"value": "none",
"text": "None of the above",
"exclusive": true
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with \"none of the above\" option, conditional content",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"idPrefix": "conditional",
"name": "example",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
},
{
"divider": "or"
},
{
"value": "none",
"text": "None of the above",
"exclusive": true
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with \"none of the above\" option, conditional content",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"idPrefix": "conditional",
"name": "example",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
},
{
"divider": "or"
},
{
"value": "none",
"text": "None of the above",
"exclusive": true
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with \"none of the above\" option (named group)",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"idPrefix": "conditional",
"name": "example",
"items": [
{
"value": "email",
"text": "Email",
"exclusiveGroup": "communication-preferences"
},
{
"value": "phone",
"text": "Phone",
"exclusiveGroup": "communication-preferences"
},
{
"value": "text",
"text": "Text message",
"exclusiveGroup": "communication-preferences"
},
{
"divider": "or"
},
{
"value": "none",
"text": "None of the above",
"exclusive": true,
"exclusiveGroup": "communication-preferences"
}
]
},
"screenshot": {
"viewports": [
"mobile",
"tablet",
"desktop"
]
},
"options": {
"hidden": true
},
"html": ""
},
{
"name": "with \"none of the above\" option (named group, unique)",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"idPrefix": "conditional",
"name": "example",
"items": [
{
"name": "preference-email",
"value": "yes",
"text": "Email",
"exclusiveGroup": "communication-preferences"
},
{
"name": "preference-phone",
"value": "yes",
"text": "Phone",
"exclusiveGroup": "communication-preferences"
},
{
"name": "preference-text",
"value": "yes",
"text": "Text message",
"exclusiveGroup": "communication-preferences"
},
{
"divider": "or"
},
{
"name": "preference-none",
"value": "yes",
"text": "None of the above",
"exclusive": true,
"exclusiveGroup": "communication-preferences"
}
]
},
"screenshot": false,
"options": {
"hidden": true
},
"html": ""
},
{
"name": "without fieldset",
"context": {
"fieldset": null,
"idPrefix": "without-fieldset",
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "without fieldset",
"description": "small",
"context": {
"fieldset": null,
"idPrefix": "without-fieldset",
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue"
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "without page heading",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"isPageHeading": false
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "without-heading",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "without page heading",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"isPageHeading": false,
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "without-heading",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with pre-checked values",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"values": [
"email",
"text"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
]
},
"screenshot": false,
"options": {},
"html": ""
},
{
"name": "with pre-checked values",
"description": "small",
"context": {
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m",
"isPageHeading": true
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"values": [
"email",
"text"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "\n \n Email address\n \n
\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "\n \n Phone number\n \n
\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "\n \n Mobile phone number\n \n
\n"
}
}
],
"small": true
},
"screenshot": false,
"options": {},
"html": ""
}
]
}