@financial-times/o-forms/demos/src/data/radio-box.json

This component provides responsive styling for form fields and inputs. It provides validation and error handling for forms, as well.

{
	"variants": [
		{
			"radioBox": true,
			"optional": true,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "radio-box-group-title",
					"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": "negative-radio-box-group-title",
					"info": "negative-radio-box-group-info"
				},
				"modifiers": ["inline"]
			},
			"title": {
				"main": "Negative highlight",
				"prompt": "Requires a modifier on the label"
			},
			"inputs": [
				{
					"type": "radio",
					"name": "negative",
					"value": "Yes",
					"id": "yes"
				},
				{
					"type": "radio",
					"name": "negative",
					"value": "No",
					"checked": true,
					"modifier": ["negative"],
					"id": "no"
				}
			]
		},
		{
			"radioBox": true,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "multiple-radio-box-group-title"
				}
			},
			"title": {
				"main": "Multiple box-styled radio buttons"
			},
			"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,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "disabed-radio-box-group-title"
				}
			},
			"title": {
				"main": "Disabled box-styled radio buttons"
			},
			"inputs": [
				{
					"type": "radio",
					"name": "disabled",
					"value": "Daily",
					"checked": true,
					"disabled": true,
					"id": "disabled-daily"
				},
				{
					"type": "radio",
					"name": "disabled",
					"value": "Monthly",
					"disabled": true,
					"id": "disabled-monthly"
				}
			]
		},
		{
			"radioBox": true,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "error-radio-box-group-title"
				},
				"error": "An example error. Try again.",
				"modifiers": [ "invalid" ]
			},
			"title": {
				"main": "Error box-style radio buttons"
			},
			"inputs": [
				{
					"type": "radio",
					"name": "error",
					"value": "Yes",
					"id": "error-yes"
				},
				{
					"type": "radio",
					"name": "error",
					"value": "No",
					"id": "error-no"
				}
			]
		},
		{
			"radioBox": true,
			"inline-field": true,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "inline-radio-box-group-title"
				},
				"modifiers": ["inline"]
			},
			"title": {
				"main": "V-centered inline radio box",
				"modifiers": [ "vertical-center" ]
			},
			"inputs": [
				{
					"type": "radio",
					"name": "inline",
					"value": "Daily",
					"checked": true,
					"id": "inline-daily"
				},
				{
					"type": "radio",
					"name": "inline",
					"value": "Weekly",
					"id": "inline-weekly"
				}
			]
		},
		{
			"radioBox": true,
			"inline-field": true,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "saving-state-group-title-long",
					"info": "saving-state-group-info-long"
				},
				"modifiers": ["saving"],
				"state": "Saving"
			},
			"title": {
				"main": "Inline box-style radio buttons with very long title. Inline box-style radio buttons with very long title",
				"prompt": "With a stacked saving state"
			},
			"inputs": [
				{
					"type": "radio",
					"name": "saving",
					"value": "Daily",
					"checked": true,
					"id": "saving-daily"
				},
				{
					"type": "radio",
					"name": "saving",
					"value": "Weekly",
					"id": "saving-weekly"
				}
			]
		},
		{
			"radioBox": true,
			"inline-field": true,
			"field": {
				"type": "radio-box",
				"aria": {
					"label": "saved-state-group-title"
				},
				"modifiers": ["saved", "inline"],
				"state": "Saved"
			},
			"title": {
				"main": "Inline saved state"
			},
			"inputs": [
				{
					"type": "radio",
					"name": "saved",
					"value": "Daily",
					"id": "saved-daily"
				},
				{
					"type": "radio",
					"name": "saved",
					"value": "Weekly",
					"checked": true,
					"id": "saved-weekly"
				}
			]
		},
		{
			"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",
				"icon": true
			},
			"title": {
				"main": "Inline saving state",
				"prompt": "Icon only—also available for saved state"
			},
			"inputs": [
				{
					"type": "radio",
					"name": "icon",
					"value": "Daily",
					"checked": true,
					"id": "icon-daily"
				},
				{
					"type": "radio",
					"name": "icon",
					"value": "Weekly",
					"id": "icon-weekly"
				}
			]
		}
	]
}