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

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

{
	"variants": [
		{
			"textInput": true,
			"optional": true,
			"title": {
				"main": "Optional text input",
				"prompt": "Optional prompt text"
			},
			"input": {
				"type": "text",
				"id": "optional"
			}
		},
		{
			"textInput": true,
			"title": {
				"main": "Text input with a valid entry"
			},
			"input": {
				"type": "text",
				"modifiers": [],
				"value": "Valid Input",
				"id": "valid"
			}
		},
		{
			"textInput": true,
			"title": {
				"main": "Text input with an invalid entry"
			},
			"input": {
				"type": "text",
				"modifiers": ["invalid"],
				"error": "Please fill out this field",
				"id": "invalid"
			}
		},
		{
			"textInput": true,
			"disabled": true,
			"title": {
				"main": "Disabled text input"
			},
			"input": {
				"type": "text",
				"value": "Disabled",
				"id": "disabled"
			}
		},
		{
			"textInput": true,
			"title": {
				"main": "Small text input"
			},
			"input": {
				"type": "text",
				"modifiers": ["small"],
				"value": "Value",
				"id": "small"
			}
		},
		{
			"textInput": true,
			"optional": true,
			"title": {
				"main": "Text input with suffix"
			},
			"input": {
				"type": "text",
				"modifiers": ["suffix"],
				"value": "",
				"button": "demo-submit-button",
				"id": "suffix"
			}
		},
		{
			"textInput": true,
			"title": {
				"main": "Small text input with suffix"
			},
			"input": {
				"type": "text",
				"modifiers": ["small", "suffix"],
				"value": "",
				"button": "demo-submit-small-button",
				"id": "small-suffix"
			}
		},
		{
			"textInput": true,
			"optional": true,
			"inline-field": true,
			"title": {
				"main": "Shrunken title",
				"prompt": "Vertically centered",
				"modifiers": ["shrink", "vertical-center"]
			},
			"input": {
				"type": "text",
				"id": "shrunken"
			}
		},
		{
			"textInput": true,
			"title": {
				"main": "Password input"
			},
			"input": {
				"type": "password",
				"value": "password",
				"id": "password"
			}
		}
	]
}