@financial-times/o-forms
Version:
This component provides responsive styling for form fields and inputs. It provides validation and error handling for forms, as well.
497 lines (496 loc) • 9.54 kB
JSON
{
"multiple-inputs": {
"variants": [
{
"optional": true,
"field": {
"type": "checkbox",
"aria": {
"label": "checkbox-group-title"
}
},
"title": {
"main": "Stacked checkboxes",
"prompt": "Optional prompt text"
},
"inputs": [
{
"type": "checkbox",
"name": "default",
"value": "Stacked 1",
"checked": true,
"id": "checkbox-stacked-1"
},
{
"type": "checkbox",
"name": "default",
"value": "Stacked 2",
"id": "checkbox-stacked-2"
},
{
"type": "checkbox",
"name": "default",
"value": "Stacked 3",
"checked": true,
"id": "checkbox-stacked-3"
}
]
},
{
"field": {
"type": "checkbox",
"aria": {
"label": "disabed-checkbox-group-title"
}
},
"title": {
"main": "Disabled checkboxes"
},
"inputs": [
{
"type": "checkbox",
"name": "disabled",
"value": "Disabled 1",
"checked": true,
"disabled": true,
"id": "checkbox-disabled-1"
},
{
"type": "checkbox",
"name": "disabled",
"value": "Disabled 2",
"disabled": true,
"id": "checkbox-disabled-2"
}
]
},
{
"optional": true,
"field": {
"type": "date",
"aria": {
"label": "date-group-title",
"info": "date-group-info"
}
},
"title": {
"main": "Date input",
"prompt": "Optional prompt text"
},
"inputs": [
{
"type": "text",
"pattern": "0[1-9]|[12]\\d|3[01]",
"classes": "o-forms-input__day-part",
"date": "DD",
"aria-label": "Day (DD)",
"id": "date"
},
{
"type": "text",
"pattern": "0?[1-9]|1[012]",
"classes": "o-forms-input__month-part",
"date": "MM",
"aria-label": "Month (MM)",
"id": "month"
},
{
"type": "text",
"pattern": "[0-9]{4}",
"classes": "o-forms-input__year-part",
"date": "YYYY",
"aria-label": "Year (YYYY)",
"id": "year"
}
]
},
{
"field": {
"type": "date",
"aria": {
"label": "error-date-group-title"
},
"error": "Not a valid date",
"modifiers": ["invalid"]
},
"title": {
"main": "Invalid date input"
},
"inputs": [
{
"type": "text",
"pattern": "0[1-9]|[12]\\d|3[01]",
"classes": "o-forms-input__day-part",
"date": "DD",
"value": "01",
"id": "error-date",
"name": "error-date"
},
{
"type": "text",
"classes": "o-forms-input__month-part",
"pattern": "0?[1-9]|1[012]",
"date": "MM",
"value": "24",
"id": "error-month",
"name": "error-month"
},
{
"type": "text",
"pattern": "[0-9]{4}",
"date": "YYYY",
"value": "2019",
"id": "error-year",
"name": "error-year"
}
]
},
{
"radioBox": true,
"optional": true,
"field": {
"type": "radio-box",
"aria": {
"label": "radio-box-group-title1",
"info": "radio-box-group-info"
}
},
"title": {
"main": "Box style radio buttons",
"prompt": "Optional prompt text"
},
"inputs": [
{
"type": "radio",
"name": "default",
"value": "Daily",
"checked": true,
"id": "daily"
},
{
"type": "radio",
"name": "default",
"value": "Weekly",
"id": "weekly"
}
]
},
{
"radioBox": true,
"field": {
"type": "radio-box",
"aria": {
"label": "multiple-radio-box-group-title2"
}
},
"title": {
"main": "Multiple checkboxes"
},
"inputs": [
{
"type": "radio",
"name": "multiple",
"value": "Daily",
"id": "multiple-daily"
},
{
"type": "radio",
"name": "multiple",
"value": "Weekly",
"checked": true,
"id": "multiple-weekly"
},
{
"type": "radio",
"name": "multiple",
"value": "Monthly",
"id": "multiple-monthly"
}
]
},
{
"radioBox": true,
"inline-field": true,
"field": {
"type": "radio-box",
"aria": {
"label": "saving-state-group-title",
"info": "saving-state-group-info"
},
"modifiers": ["saving", "inline"],
"state": "Saving"
},
"title": {
"main": "Inline Saving state",
"prompt": "When saving a preference"
},
"inputs": [
{
"type": "radio",
"name": "saving",
"value": "Daily",
"checked": true,
"id": "saving-daily"
},
{
"type": "radio",
"name": "saving",
"value": "Weekly",
"id": "saving-weekly"
}
]
},
{
"optional": true,
"field": {
"type": "radio-round",
"aria": {
"label": "radio-round-group-title",
"info": "radio-round-group-info"
}
},
"title": {
"main": "Default radio buttons",
"prompt": "Optional prompt text"
},
"inputs": [
{
"type": "radio",
"name": "default",
"value": "Default 1",
"checked": true,
"id": "default-1"
},
{
"type": "radio",
"name": "default",
"value": "Default 2",
"id": "default-2"
}
]
},
{
"field": {
"type": "radio-round",
"aria": {
"label": "disabed-radio-round-group-title"
}
},
"title": {
"main": "Disabled radio buttons"
},
"inputs": [
{
"type": "radio",
"name": "disabled",
"value": "Disabled 1",
"checked": true,
"disabled": true,
"id": "radio-disabled-1"
},
{
"type": "radio",
"name": "disabled",
"value": "Disabled 2",
"disabled": true,
"id": "radio-disabled-2"
}
]
},
{
"optional": true,
"field": {
"type": "toggle",
"aria": {
"label": "toggle-group-title",
"info": "toggle-group-info"
}
},
"title": {
"main": "Default toggle checkboxes",
"prompt": "Optional prompt text"
},
"inputs": [
{
"type": "checkbox",
"name": "default",
"value": "Stacked 1",
"checked": true,
"id": "toggle-stacked-1"
},
{
"type": "checkbox",
"name": "default",
"value": "Stacked 2",
"id": "toggle-stacked-2"
}
]
},
{
"inverse": true,
"optional": true,
"field": {
"type": "toggle",
"aria": {
"label": "inverse-toggle-group-title",
"info": "inverse-toggle-group-info"
}
},
"title": {
"main": "Inverse checkboxes",
"prompt": "Inverse prompt text"
},
"inputs": [
{
"type": "checkbox",
"name": "inverse",
"value": "Inverse 1",
"checked": true,
"id": "inverse-1"
},
{
"type": "checkbox",
"name": "inverse",
"value": "Inverse 2",
"id": "inverse-2"
}
]
}
]
},
"single-input": {
"variants": [
{
"textInput": true,
"optional": true,
"title": {
"main": "Optional text input",
"prompt": "Optional prompt text"
},
"input": {
"type": "text",
"id": "optional-text-input"
}
},
{
"textInput": true,
"title": {
"main": "Text input with a valid entry"
},
"input": {
"type": "text",
"modifiers": [],
"value": "Valid Input",
"id": "valid-text-input"
}
},
{
"textInput": true,
"title": {
"main": "Text input with an invalid entry"
},
"input": {
"type": "text",
"modifiers": ["invalid"],
"value": "Invalid Input",
"error": "Something went wrong",
"id": "invalid-text-input"
}
},
{
"textInput": true,
"disabled": true,
"title": {
"main": "Disabled text input"
},
"input": {
"type": "text",
"value": "Disabled",
"id": "disabled-text-input"
}
},
{
"textInput": true,
"title": {
"main": "Text input with suffix"
},
"input": {
"type": "text",
"modifiers": ["suffix"],
"value": "",
"button": "demo-submit-button",
"id": "suffix-text-input"
}
},
{
"textInput": true,
"title": {
"main": "File input"
},
"input": {
"type": "file",
"id": "file-input"
}
},
{
"textInput": true,
"title": {
"main": "Password input"
},
"input": {
"type": "password",
"value": "password",
"id": "password-input"
}
},
{
"select": true,
"title": {
"main": "Small select box"
},
"input": {
"type": "select",
"options": ["Option 1", "Option 2", "Option 3", "Option 4"],
"modifiers": ["small"],
"id": "small-select"
}
},
{
"select": true,
"multiple": true,
"title": {
"main": "Multiple select box"
},
"input": {
"type": "select",
"options": ["Option 1", "Option 2", "Option 3", "Option 4"],
"id": "multiple-select"
}
},
{
"textArea": true,
"optional": true,
"title": {
"main": "Optional text area",
"prompt": "Optional prompt text"
},
"input": {
"type": "textarea",
"id": "optional-text-area"
}
},
{
"textArea": true,
"disabled": true,
"title": {
"main": "Disabled text area"
},
"input": {
"type": "textarea",
"value": "Disabled",
"id": "disabled-text-area"
}
}
]
}
}