@financial-times/o-forms/origami.json

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

{
	"origamiType": "component",
	"origamiVersion": "2.0",
	"brands": [
		"core",
		"internal",
		"whitelabel"
	],
	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-forms,components",
	"supportContact": {
		"email": "origami.support@ft.com",
		"slack": "financialtimes/origami-support"
	},
	"supportStatus": "active",
	"browserFeatures": {
		"required": [
			"DOMTokenList",
			"Element.prototype.closest",
			"Array.prototype.includes",
			"Array.from",
			"Object.assign"
		]
	},
	"demosDefaults": {
		"sass": "demos/src/demo.scss",
		"js": "demos/src/demo.js",
		"documentClasses": "demo"
	},
	"demos": [
		{
			"name": "professional",
			"title": "Professional theme",
			"template": "/demos/src/professional.mustache",
			"description": "Professional theme",
			"brands": [
				"core"
			]
		},
		{
			"name": "professional-inverse",
			"title": "Professional inverse theme",
			"template": "/demos/src/professional-inverse.mustache",
			"description": "Professional inverse theme",
			"sass": "demos/src/inverse.scss",
			"brands": [
				"core"
			]
		},
		{
			"name": "ft-live",
			"title": "FT Live inverse theme",
			"template": "/demos/src/ft-live.mustache",
			"description": "FT Live theme",
			"sass": "demos/src/inverse.scss",
			"brands": [
				"core"
			]
		},
		{
			"name": "inverse-form",
			"title": "Inverse Form",
			"template": "/demos/src/inverse-form.mustache",
			"description": "Inverse form",
			"sass": "demos/src/inverse.scss",
			"brands": [
				"core",
				"internal"
			]
		},
		{
			"name": "inverse-form-whitelabel",
			"title": "Inverse Form",
			"template": "/demos/src/inverse-form-whitelabel.mustache",
			"description": "Inverse form",
			"sass": "demos/src/inverse.scss",
			"brands": [
				"whitelabel"
			]
		},
		{
			"name": "pseudo-radio-links",
			"title": "Pseudo Radio Links (Deprecated)",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Anchor elements that imitate box-style radio inputs",
			"data": "/demos/src/data/pseudo-radio-links.json",
			"hidden": true
		},
		{
			"name": "checkboxes",
			"title": "Checkboxes",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Checkbox inputs with a default squared style",
			"data": "/demos/src/data/checkboxes.json"
		},
		{
			"name": "custom",
			"title": "Customised pseudo-radio-links/radio-boxes",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Custom theme example for box-styled anchors and radio inputs",
			"data": "/demos/src/data/custom.json",
			"hidden": true
		},
		{
			"name": "date",
			"title": "Date input",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Date input with text fields instead of a date picker",
			"data": "/demos/src/data/date.json"
		},
		{
			"name": "radio-box",
			"title": "Box-styled radio inputs",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Radio button inputs with a box-like style",
			"data": "/demos/src/data/radio-box.json"
		},
		{
			"name": "radio-round",
			"title": "Round-styled radio inputs",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Radio button inputs with a default circular style",
			"data": "/demos/src/data/radio-round.json"
		},
		{
			"name": "toggle",
			"title": "Toggle",
			"template": "/demos/src/multiple-input-field.mustache",
			"description": "Checkbox inputs with a toggle style",
			"data": "/demos/src/data/toggle.json"
		},
		{
			"name": "text-input",
			"title": "Text input",
			"template": "/demos/src/single-input-field.mustache",
			"description": "Regular text input",
			"data": "/demos/src/data/text-input.json"
		},
		{
			"name": "file-input",
			"title": "File input",
			"template": "/demos/src/file-input-field.mustache",
			"description": "Regular file input",
			"data": "/demos/src/data/file-input.json"
		},
		{
			"name": "text-area",
			"title": "Text Area",
			"template": "/demos/src/single-input-field.mustache",
			"description": "Regular textarea input",
			"data": "/demos/src/data/text-area.json"
		},
		{
			"name": "select",
			"title": "Select boxes",
			"template": "/demos/src/single-input-field.mustache",
			"description": "Dropdown/Selection inputs",
			"data": "/demos/src/data/select.json"
		},
		{
			"name": "interactive",
			"title": "Interactive form demo",
			"template": "/demos/src/interactive.mustache",
			"description": "Illustrates validation and state behaviour with form JS",
			"js": "demos/src/interactive.js"
		},
		{
			"name": "interactive-suffix",
			"title": "Interactive form demo with suffice",
			"template": "/demos/src/interactive-suffix.mustache",
			"description": "Illustrates validation and state behaviour with form JS on an input with a suffix.",
			"js": "demos/src/interactive.js",
			"hidden": true
		},
		{
			"name": "pa11y",
			"title": "Accessibility testing",
			"template": "/demos/src/pa11y.mustache",
			"description": "pa11y",
			"data": "/demos/src/data/pa11y.json",
			"hidden": true
		}
	]
}