FormKitDataEdit Demo
Show Reset Button
Horizontal
Data
{
"date": "2025-04-02T19:45:59.504Z",
"text": "Lorem Ipsum",
"slots": {},
"field": "https://www.google.de"
}Schema
[
{
"$el": "h2",
"if": "true",
"attrs": {},
"children": [
"Register ",
"$email"
]
},
{
"$el": "h3",
"if": "true",
"attrs": {},
"children": "Header Text H3"
},
{
"$formkit": "primeInputText",
"name": "email",
"label": "Email",
"help": "This will be used for your account.",
"validation": "required|email",
"iconPrefix": "pi pi-book",
"iconSuffix": "pi pi-bullseye"
},
{
"$formkit": "primeTextarea",
"name": "myText",
"label": "Text",
"validation": "",
"rows": "3"
},
{
"$formkit": "primeDatePicker",
"name": "date",
"label": "Date"
},
{
"$formkit": "primeOutputLink",
"name": "field",
"value": "https://www.google.de",
"label": "Output Link",
"iconSuffix": "pi pi-check",
"suffix": "This is the suffix",
"prefix": "This is the prefix",
"iconPrefix": "pi pi-trash"
},
{
"$el": "h3",
"if": "true",
"attrs": {},
"children": "Password demo"
},
{
"$formkit": "primePassword",
"name": "password",
"label": "Password",
"help": "Enter your new password.",
"validation": "required|length:5,16",
"feedback": true,
"outerClass": "col-6"
},
{
"$formkit": "primePassword",
"name": "password_confirm",
"label": "Confirm password",
"help": "Enter your new password again.",
"validation": "required|confirm",
"validationLabel": "password confirmation",
"outerClass": "col-6"
},
{
"$el": "h3",
"if": "true",
"attrs": {},
"children": "Conditional Demo"
},
{
"$formkit": "primeCheckbox",
"name": "eu_citizen",
"id": "eu",
"suffix": "Are you a european citizen?",
"outerClass": "col-6"
},
{
"$formkit": "primeSelect",
"if": "$get(eu).value",
"name": "cookie_notice",
"label": "Cookie notice frequency",
"optionLabel": "label",
"optionValue": "value",
"options": [
{
"label": "Every page load",
"value": "refresh"
},
{
"label": "Every hour",
"value": "hourly"
},
{
"label": "Every day",
"value": "daily"
}
],
"help": "How often should we display a cookie notice?",
"outerClass": "col-6"
}
]