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

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

{
	"variants": [
		{
			"select": true,
			"optional": true,
			"title": {
				"main": "Default",
				"prompt": "Optional prompt/description text"
			},
			"input": {
				"type": "select",
				"selected": "Option 1 (low chars: qgjpy)",
				"options": ["Option 2", "Option 3", "Option 4"],
				"id": "optional"
			}
		},
		{
			"select": true,
			"title": {
				"main": "Valid selection"
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"modifiers": [],
				"id": "valid"
			}
		},
		{
			"select": true,
			"title": {
				"main": "Invalid selection"
			},
			"input": {
				"type": "select",
				"selected": "",
				"options": ["", "Option 1", "Option 2", "Option 3"],
				"modifiers": ["invalid"],
				"error": "An example error. Try again.",
				"id": "invalid"
			}
		},
		{
			"select": true,
			"disabled": true,
			"title": {
				"main": "Disabled select box"
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"id": "disabled"
			}
		},
		{
			"select": true,
			"title": {
				"main": "Small select box"
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"modifiers": ["small"],
				"id": "small"
			}
		},
		{
			"select": true,
			"multiple": true,
			"title": {
				"main": "Multiple select box"
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"id": "multiple"
			}
		},
		{
			"select": true,
			"title": {
				"main": "Select box with suffix",
				"prompt": "And prompt text for good measure"
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"modifiers": ["suffix"],
				"button": "demo-submit-button",
				"id": "suffix"
			}
		},
		{
			"select": true,
			"title": {
				"main": "Small select box with suffix"
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"modifiers": ["suffix", "small"],
				"button": "demo-submit-small-button",
				"id": "small-suffix"
			}
		},
		{
			"select": true,
			"inline-field": true,
			"title": {
				"main": "Short title",
				"prompt": "Long input",
				"modifiers": ["shrink"]
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"id": "short-title"
			}
		},
		{
			"select": true,
			"inline-field": true,
			"title": {
				"main": "Vertically centered title",
				"modifiers": ["vertical-center"]
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"id": "vertical-center"
			}
		},
		{
			"select": true,
			"inline-field": true,
			"multiple": true,
			"title": {
				"main": "Inline multiple selectbox",
				"prompt": "Multiple select boxes can also be inlined."
			},
			"input": {
				"type": "select",
				"selected": "Option 1",
				"options": ["Option 2", "Option 3", "Option 4"],
				"id": "inline-multiple"
			}
		}
	]
}