{
	"variants": [
		{
			"optional": true,
			"field": {
				"type": "date",
				"aria": {
					"label": "date-group-title",
					"info": "date-group-info"
				}
			},
			"title": {
				"main": "Date input",
				"prompt": "Optional prompt/description text"
			},
			"inputs": [
				{
					"type": "text",
					"name": "date",
					"pattern":"(0[1-9]|1[0-9]|2[0-9]|3[01])",
					"classes": "o-forms-input__day-part",
					"inputmode": "numeric",
					"date": "DD",
					"id": "date"
				},
				{
					"type": "text",
					"name": "date",
					"pattern": "(0[1-9]|1[012])",
					"classes": "o-forms-input__month-part",
					"date": "MM",
					"id": "month"
				},
				{
					"type": "text",
					"name": "date",
					"pattern": "[0-9]{4}",
					"classes": "o-forms-input__year-part",
					"date": "YYYY",
					"id": "year"
				}
			]
		},
		{
			"field": {
				"type": "date",
				"aria": {
					"label": "disabled-date-group-title"
				}
			},
			"title": {
				"main": "Disabled date input"
			},
			"inputs": [
				{
					"type": "text",
					"name": "disabled-date",
					"pattern":"(0[1-9]|1[0-9]|2[0-9]|3[01])",
					"classes": "o-forms-input__day-part",
					"inputmode": "numeric",
					"date": "DD",
					"disabled": true,
					"id": "disabled-date"
				},
				{
					"type": "text",
					"name": "disabled-date",
					"pattern": "(0[1-9]|1[012])",
					"classes": "o-forms-input__month-part",
					"inputmode": "numeric",
					"date": "MM",
					"disabled": true,
					"id": "disabled-month"
				},
				{
					"type": "text",
					"name": "disabled-date",
					"pattern": "[0-9]{4}",
					"classes": "o-forms-input__year-part",
					"inputmode": "numeric",
					"date": "YYYY",
					"disabled": true,
					"id": "disabled-year"
				}
			]
		},
		{
			"field": {
				"type": "date",
				"aria": {
					"label": "error-date-group-title",
					"info": "error-date-group-info"
				},
				"error": "Not a valid date",
				"modifiers": [ "invalid" ]
			},
			"title": {
				"main": "Invalid date input",
				"prompt": "Exemplifies a pattern mismatch"
			},
			"inputs": [
				{
					"type": "text",
					"name": "invalid-date",
					"pattern":"(0[1-9]|1[0-9]|2[0-9]|3[01])",
					"classes": "o-forms-input__day-part",
					"inputmode": "numeric",
					"date": "DD",
					"value": "01",
					"id": "invalid-date"
				},
				{
					"type": "text",
					"name": "invalid-date",
					"pattern": "(0[1-9]|1[012])",
					"classes": "o-forms-input__month-part",
					"inputmode": "numeric",
					"date": "MM",
					"value": "24",
					"id": "invalid-month"
				},
				{
					"type": "text",
					"name": "invalid-date",
					"pattern": "[0-9]{4}",
					"classes": "o-forms-input__year-part",
					"inputmode": "numeric",
					"date": "YYYY",
					"value": "2019",
					"id": "invalid-year"
				}
			]
		},
		{
			"inline-field": true,
			"field": {
				"type": "date",
				"aria": {
					"label": "inline-date-group-title"
				},
				"modifiers": [ "inline" ]
			},
			"title": {
				"main": "Inline date input"
			},
			"inputs": [
				{
					"type": "text",
					"name": "inline-date",
					"pattern":"(0[1-9]|1[0-9]|2[0-9]|3[01])",
					"classes": "o-forms-input__day-part",
					"inputmode": "numeric",
					"date": "DD",
					"id": "inline-date"
				},
				{
					"type": "text",
					"name": "inline-date",
					"pattern": "(0[1-9]|1[012])",
					"classes": "o-forms-input__month-part",
					"date": "MM",
					"id": "inline-month"
				},
				{
					"type": "text",
					"name": "inline-date",
					"pattern": "[0-9]{4}",
					"classes": "o-forms-input__year-part",
					"date": "YYYY",
					"id": "inline-year"
				}
			]
		}
	]
}