FormKit is a form-building framework for Vue developers that makes authoring high-quality production-ready forms 10x faster. It is easy to learn and ships with production-ready scaffolding like inputs, validation rules, and error handling.

Features

Comprehensive

FormKit is designed to be the destination for all your form needs, whether form styling, validation, generation, error handling, custom inputs, or a plethora of other requirements.

Easy to learn

FormKit uses a single component for all of its inputs. FormKit is the only component you need to know to get started — and it works just like you would expect an input tag to work:

Blazing-fast Performance

FormKit can handle the most demanding forms — wizards, multi-step, deeply nested repeating groups, and more.

Plugin system

Extend FormKit’s functionality or reuse custom inputs, validation rules, and messages across projects by tapping into the plugin system.

Generate forms

Generate an entire form from a JSON-compatible schema. Schema allows you to render complex forms from JSON with conditional rendering, logic, dynamic data, groups, wrappers, HTML elements, and custom components.

Installation

FormKit can be installed utilizing a package manager like npm or yarn or it can be used directly via CDN.

npm install @formkit/vue

The @formkit/vue package ships with a Vue plugin and a default configuration for easy setup.

import { createApp } from 'vue'
import App from 'App.vue'
import { plugin, defaultConfig } from '@formkit/vue'

createApp(App).use(plugin, defaultConfig).mount('#app')

That’s it! You’re now ready to use the FormKit component in your Vue application. The defaultConfig includes all of FormKit’s inputs, validation rules, and the English language. You can replace the defaultConfig with your own configuration, which allows for improved tree-shaking (only include the rules and languages you want to actually use) and more fine-grained control.

Usage

Inputs

FormKit’s inputs are similar to HTML inputs but turbocharged with many features like labels, help text, validation, and error messages (and much more). Similar to how HTML’s input tag uses various type attributes (i.e., input type=“text” vs input type=“checkbox”), FormKit uses the type prop for all inputs.

<FormKit type="text" />
<FormKit type="select" />
<FormKit type="textarea" />

Using value prop

You can set the value of a single input or a group of inputs using the value prop.

<template>
  <FormKit
    label="Username"
    type="text"
    help="Pick a new username"
    validation="required|matches:/^@[a-zA-Z]+$/|length:5"
    value="@useFormKit"
  />
</template>

Other Features & Options

• Inputs
• Validation
• Forms
• Form Generation
• Slots
• Styling
• Internationalization (i18n)

Here’s a brief introduction to this package. But don’t worry this package has a bundle of advanced features and options. If you want to learn more about this package you can visit its detailed documentation here on formkit.com.