@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.
222 lines (221 loc) • 4.03 kB
JSON
{
"variants": [
{
"optional": true,
"field": {
"type": "radio-round",
"aria": {
"label": "radio-round-group-title",
"info": "radio-round-group-info"
}
},
"title": {
"main": "Default round-style radio buttons",
"prompt": "Optional prompt/description 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": "inline-radio-round-group-title1"
},
"modifiers": ["inline"]
},
"title": {
"main": "Inline round-style radio buttons"
},
"inputs": [
{
"type": "radio",
"name": "inline-radio",
"value": "Inlined 1",
"checked": true,
"id": "inline-radio-1"
},
{
"type": "radio",
"name": "inline-radio",
"value": "Inlined 2",
"id": "inline-radio-2"
},
{
"type": "radio",
"name": "inline-radio",
"value": "Inlined 3",
"id": "inline-radio-3"
}
]
},
{
"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": "disabled-1"
},
{
"type": "radio",
"name": "disabled",
"value": "Disabled 2",
"disabled": true,
"id": "disabled-2"
}
]
},
{
"field": {
"type": "radio-round",
"aria": {
"label": "error-radio-round-group-title"
},
"error": "An example error. Try again.",
"modifiers": [ "invalid" ]
},
"title": {
"main": "Error round-style radio buttons"
},
"inputs": [
{
"type": "radio",
"name": "error",
"value": "Error 1",
"id": "error-1"
},
{
"type": "radio",
"name": "error",
"value": "Error 2",
"id": "error-2"
}
]
},
{
"field": {
"type": "radio-round",
"aria": {
"label": "inline-radio-round-group-title2"
},
"modifiers": [
"inline"
]
},
"title": {
"main": "Inline round-style radio buttons"
},
"inputs": [
{
"type": "radio",
"name": "inline",
"value": "Inlined 1",
"checked": true,
"id": "inline-1"
},
{
"type": "radio",
"name": "inline",
"value": "Inlined 2",
"id": "inline-2"
},
{
"type": "radio",
"name": "inline",
"value": "Inlined 3",
"id": "inline-3"
}
]
},
{
"inline-field": true,
"field": {
"type": "radio-round",
"aria": {
"label": "inline-field-radio-round-group-title"
},
"modifiers": [
"inline"
]
},
"title": {
"main": "Inline field and radio buttons"
},
"inputs": [
{
"type": "radio",
"name": "inline-field",
"value": "Inlined 1",
"checked": true,
"id": "inline-field-1"
},
{
"type": "radio",
"name": "inline-field",
"value": "Inlined 2",
"id": "inline-field-2"
}
]
},
{
"inline-field": true,
"field": {
"type": "radio-round",
"aria": {
"label": "inline-field-stacked-radio-round-group-title",
"info": "inline-field-stacked-radio-round-group-info"
}
},
"title": {
"main": "Inline field",
"prompt": "And stacked radio buttons"
},
"inputs": [
{
"type": "radio",
"name": "inline-stacked",
"value": "Inlined 1",
"checked": true,
"id": "inline-stacked-1"
},
{
"type": "radio",
"name": "inline-stacked",
"value": "Inlined 2",
"id": "inline-stacked-2"
},
{
"type": "radio",
"name": "inline-stacked",
"value": "Inlined 3",
"id": "inline-stacked-3"
}
]
}
]
}