A new approach to form architecture
FormKit is an open-source form framework that radically simplifies your projects. Reduce boilerplate, improve accessibility, and easily access all your form's data at infinite depth without prop-drilling, event emitting, or complex data-stores.
<FormKit type="form"> <h1>Shipping Information</h1> <FormKit type="text" name="full_name" label="Full Name" prefix-icon="avatar" validation="required" help="Please enter your first and last name" /> <!-- 👀 No bindings --> <AddressInputGroup /></FormKit>{
full_name: '',
address: {
street: '',
unit: '',
city: '',
state: '',
zip: '',
}
}
Trusted by leading teams
Structure your form data without any manual plumbing.
FormKit automatically creates connections between your inputs at infinite depth — allowing you to componentize your form elements and compose them without manual prop-drilling, event emitting, or complex modeling.
This architecture is designed to be simple, intuitive, and predictable. It allows you to focus on building your form, not managing its state.
Get started<FormKit type="form"> <!-- 👀 No bindings, no modeling --> <UserAccount /> <UserNetworks /> <UserPreferences /></FormKit>account: {
name: 'John FormKit',
email: '[email protected]',
bio: 'I love building forms with FormKit!',
proSubscriber: true
},
networks: [
{
name: 'twitter',
username: '@FormKit'
},
{
name: 'github',
username: 'FormKit'
}
],
preferences: [
'marketing',
'updates'
]
{
"recipe_name": "Pumpkin Pie",
"cook_time": "1 hour",
"description": "This is a delicious pumpkin pie recipe that is perfect for the holidays.",
"ingredients": [
{
"name": "Pumpkin Puree",
"quantity": 2,
"unit": "cup"
}
]
}<FormKit type="form" @submit="handleSubmit" submit-label="Save Recipe"> <div class="grid grid-cols-2 gap-4"> <FormKit type="text" name="recipe_name" label="Recipe Name" /> <FormKit type="text" name="cook_time" label="Cook Time" /> <FormKit type="textarea" name="description" label="Description" outer-class="col-span-2 max-w-none" /> </div> <FormKit type="repeater" name="ingredients" label="Ingredients" draggable add-label="Add Ingredient"> <div class="grid grid-cols-3 gap-4"> <FormKit type="text" name="name" label="Name" /> <FormKit type="number" name="quantity" label="Quantity" /> <FormKit type="dropdown" placeholder="Choose" name="unit" label="Unit" :options="['cup', 'lb', 'oz', 'tsp', 'tbsp']" /> </div> </FormKit></FormKit>One component. infinite possibilities.
All you need to get started is the FormKit component.
It handles everything from validation to submission and it's fully customizable with slots and props.
Scale form development across your team with a consistent input API and a single component name that identifies your form elements.
Get started“Forms today remain fundamentally unsolved. We need a new low-level primitive to power the next generation of web applications. The FormKit node is that primitive.”
After using @FormKit for a few weeks I just can't recommend it enough. Quality + Flexibility + Productivity 🚀
The team from @FormKit are awesome. If you're not working with them, you're doing it wrong.
FormKit is probably the best way to handle forms :)
[...] @FormKit saves us a lot of time
Congrats to @jpschroeder and the @FormKit team [...] These guys have absolutely nailed form authoring and the amazing DX fits right in with @vuejs. Glad this is part of the vue ecosystem.
[...] One thing is sure you'll like FormKit. [...]
It's insane how good FormKit is!
Been there done that. Which is why we now use FormKit :)
[...] @FormKit is the clear favourite here.
New to @FormKit yesterday, rolling my own custom color picker for @turnaudio 2 today. The power of good docs.
Ok how come no one told me about Formkit? This has a bunch of the stuff I was looking for
My application has quite a few forms and FormKit saves my butt every time. [...] If I had to write those forms by hand from scratch, I'd consider quitting the job.
[...] FormKit will definitely be my choice the next time I need a form framework 💪🏻
FormKit has allowed us to streamline the process of creating complicated forms and reusing these across several projects, saving us tons of development time!
I just found out about @FormKit for Vue/Nuxt. Such a breeze.
Been doing some great stuff with FormKit on the donation platform I am writing. Great framework!
[...] The @FormKit team doesn't miss!
For the last project which is a form-heavy project, I used @FormKit and I feel mentally healthier!
Trusted by teams that ship at scale