MultiStep
Use Tab
Mode: tab
Data
{ "slots": {}, "multi-step_2": { "step1": {}, "step2": {}, "step3": {} } }[
0
:
{
$formkit
:
multi-step
tabStyle
:
tab
allowIncomplete
:
true
children
:
[
0
:
{
$formkit
:
step
name
:
step1
label
:
Step 1
nextAttrs
:
{
data-foo
:
bar
}
children
:
[
0
:
{
$formkit
:
primeInputText
name
:
email
label
:
Email
help
:
This will be used for your account.
validation
:
required|email
outerClass
:
col-6
}
]
}
1
:
{
$formkit
:
step
name
:
step2
label
:
Step 2
children
:
[
0
:
{
$formkit
:
primeTextarea
name
:
myText
label
:
Text
validation
:
rows
:
3
}
]
}
2
:
{
$formkit
:
step
name
:
step3
label
:
Step 3
children
:
[
0
:
{
$formkit
:
primeInputText
name
:
name
label
:
Basic
validation
:
required
}
1
:
{
$formkit
:
primeInputText
id
:
icon
name
:
todo
label
:
Todo
help
:
placeholder
:
todo
iconPrefix
:
pi pi-check
validation
:
required
}
]
}
]
}
]
{
slots
:
{
}
multi-step_2
:
{
step1
:
{
email
:
undefined
}
step2
:
{
myText
:
undefined
}
step3
:
{
name
:
undefined
todo
:
undefined
}
}
}
Formkit (1.6) - PrimeVue (4.2.x) - FormKit-PrimeVue-Version 3.0.10 - sfxcode 2024