@financial-times/o-forms/demos/src/data/text-area.json

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

{
	"variants": [
		{
			"textArea": true,
			"optional": true,
			"title": {
				"main": "Optional text area",
				"prompt": "Optional prompt text"
			},
			"input": {
				"type": "textarea",
				"id": "textarea"
			}
		},
		{
			"textArea": true,
			"title": {
				"main": "Text area with a valid entry"
			},
			"input": {
				"type": "textarea",
				"modifiers": [ ],
				"value": "Yup!",
				"id": "textarea-valid"
			}
		},
		{
			"textArea": true,
			"title": {
				"main": "Text area with an invalid entry"
			},
			"input": {
				"type": "textarea",
				"modifiers": [ "invalid" ],
				"value": "",
				"error": "Please fill out this field",
				"id": "textarea-invalid"
			}
		},
		{
			"textArea": true,
			"disabled": true,
			"title": {
				"main": "Disabled text area"
			},
			"input": {
				"type": "textarea",
				"value": "Disabled",
				"id": "textarea-disabled"
			}
		},
		{
			"textArea": true,
			"inline-field": true,
			"title": {
				"main": "Inline text area",
				"prompt": "Inline text area fields can be set in this way."
			},
			"input": {
				"type": "textarea",
				"id": "textarea-inline"
			}
		},
		{
			"textArea": true,
			"inline-field": true,
			"title": {
				"main": "Shrunken title",
				"prompt": "A prompt can go here",
				"modifiers": [ "shrink"]
			},
			"input": {
				"type": "textarea",
				"id": "textarea-inline-shrunken"
			}
		}
	]
}