Formkit Demo
Data
{
"email": "tom@sfxcode.com",
"slots": {}
}[
0
:
{
$el
:
h2
if
:
true
attrs
:
{
}
children
:
[
0
:
Register
1
:
$email
]
}
1
:
{
$el
:
h3
if
:
true
attrs
:
{
}
children
:
Header Text H3
}
2
:
{
$formkit
:
primeInputText
name
:
email
label
:
Email
help
:
This will be used for your account.
validation
:
required|email
outerClass
:
col-6
}
3
:
{
$formkit
:
primeTextarea
name
:
myText
label
:
Text
validation
:
rows
:
3
}
4
:
{
$formkit
:
primeEditor
name
:
myEditor
label
:
Editor
style
:
height: 160px; margin-bottom:80px;
}
5
:
{
$formkit
:
primePassword
name
:
password
label
:
Password
help
:
Enter your new password.
validation
:
required|length:5,16
feedback
:
true
outerClass
:
col-6
}
6
:
{
$formkit
:
primePassword
name
:
password_confirm
label
:
Confirm password
help
:
Enter your new password again.
validation
:
required|confirm
validationLabel
:
password confirmation
outerClass
:
col-6
}
7
:
{
$formkit
:
primeCheckbox
name
:
eu_citizen
id
:
eu
prefix
:
Are you a european citizen?
}
8
:
{
$formkit
:
primeSelect
if
:
$get(eu).value
name
:
cookie_notice
label
:
Cookie notice frequency
optionLabel
:
label
optionValue
:
value
options
:
[
0
:
{
label
:
Every page load
value
:
refresh
}
1
:
{
label
:
Every hour
value
:
hourly
}
2
:
{
label
:
Every day
value
:
daily
}
]
help
:
How often should we display a cookie notice?
outerClass
:
col-6
}
]
{
email
:
tom@sfxcode.com
slots
:
{
}
myText
:
undefined
myEditor
:
undefined
password
:
undefined
password_confirm
:
undefined
eu_citizen
:
undefined
}
Formkit (1.6) - PrimeVue (4.2.x) - FormKit-PrimeVue-Version 2.8.2 - sfxcode 2024