{
"title": "My form",
"fields": [
{
"label": "This needs \"foo\"",
"placeholder": "Placeholder test",
"name": "foo",
"type": "text",
"value": "bar",
"validate": [
{
"type": "string",
"pattern": "^foo",
"message": "Must start with foo"
},
{
"type": "string",
"min": 6
}
]
},
{
"label": "Placeholder text",
"placeholder": "Placeholder test",
"name": "placeholder",
"type": "text",
"value": ""
},
{
"label": "Color",
"name": "color",
"type": "color",
"value": "#ff0000"
},
{
"label": "Range",
"name": "range",
"type": "range",
"value": "10",
"min": "20",
"max": "50",
"step": "5",
"options": [
{
"value": "20",
"label": "Option 1"
},
{
"value": "30",
"label": "Option 2"
},
{
"value": "40",
"label": "Option 3"
}
]
},
{
"label": "Email",
"name": "email",
"type": "email",
"value": "aa@bb.cc",
"validate": [
{
"type": "string",
"min": 3,
"max": 255
},
{
"type": "email"
}
]
},
{
"label": "Number",
"name": "number",
"type": "number",
"value": "1"
},
{
"label": "Password",
"name": "password",
"type": "password",
"value": "123456"
},
{
"label": "tel",
"name": "tel",
"type": "tel",
"value": "111222333"
},
{
"label": "Text",
"name": "text",
"type": "text",
"value": "my text"
},
{
"label": "Time",
"name": "time",
"type": "time",
"value": "12:00"
},
{
"label": "URL",
"name": "url",
"type": "url",
"value": "https://www.google.com"
},
{
"label": "Datetime",
"name": "datetime",
"type": "datetime-local",
"value": "2020-01-01T12:00"
},
{
"label": "Hidden",
"name": "hidden",
"type": "hidden",
"value": "9"
},
{
"label": "Month",
"name": "month",
"type": "month",
"value": "2020-01"
},
{
"label": "Search",
"name": "search",
"type": "search",
"value": "my search"
},
{
"label": "Textarea",
"name": "textarea",
"type": "textarea",
"value": "some text\nsome text\nsome text",
"rows": 4
},
{
"label": "Select",
"name": "select",
"type": "select",
"value": "2",
"options": [
{
"value": "1",
"label": "Option 1"
},
{
"value": "2",
"label": "Option 2"
},
{
"value": "3",
"label": "Option 3"
}
]
},
{
"label": "Radio Group",
"name": "radioGroup",
"type": "radioGroup",
"value": "2",
"options": [
{
"value": "1",
"label": "Option 1"
},
{
"value": "2",
"label": "Option 2"
},
{
"value": "3",
"label": "Option 3"
}
]
},
{
"label": "Object",
"name": "object",
"type": "object",
"value": {},
"fields": [
{
"name": "sub-1",
"label": "Sub 1",
"value": "sub 1"
},
{
"name": "sub-2",
"label": "Sub 2",
"value": "sub 2"
}
]
},
{
"label": "Array",
"name": "array",
"type": "array",
"value": [
{
"sub1": "sub 1",
"sub2": "sub 2"
}
],
"fields": [
{
"name": "sub1",
"label": "Sub 1",
"value": "sub 1"
},
{
"name": "sub2",
"label": "Sub 2",
"value": "sub 2"
}
]
}
]
}