Formkit – The form framework for Vue

What is FormKit?

FormKit is an open-source form framework for Vue.js that simplifies form structure, generation, validation, theming, submission, error handling, and more. It is designed to help developers build forms 10x faster by providing powerful form features for data flow, error handling, and state management. FormKit offers 24+ accessible inputs powered by a single component, 20+ built-in validation rules, and support for writing your own. You can use FormKit’s default Genesis CSS theme, Tailwind, or your own custom approach with full control over every DOM element. FormKit’s JSON-compatible dynamic schema allows you to generate forms with ease and is fully serializable for database storage. FormKit is engineered to handle the most demanding forms and is supported by a vibrant community of developers. You can learn more about FormKit on their official website or check out their GitHub repository for more information.

Key Features

• Single component: FormKit was designed with a single component for all inputs.
• Accessibility: We output an opinionated accessible markup by default.
• Validation: Numerous built-in validation rules with instant feedback.
• Schema: Powerful schema format to store and generate forms.
• Styles: Beautifully crafted theme.
• Extensibility: Easy to extend any feature.
• Community: Friendly community that will help you solve your questions.

Build forms with FormKit

To install FormKit, you need to have Vue.js 3 or Nuxt 3 and Node.js 14.18.0, 16.12.0, or higher installed on your system. Once you have these prerequisites installed, you can follow the installation instructions provided on the official FormKit website or the FormKit GitHub repositor.
If you’re starting a new project, you can use the installation instruction wizard provided on the FormKit website to determine the best way to set up FormKit in your project by answering a few questions.
If you’re using Vue 2 or Nuxt 2, you can use FormKit’s predecessor, VueFormulate.

Single component <FormKit/>
FormKit’s single component is one of its most powerful features. The <Formkit /> component gives you access to all input types, and while some types may extend and add features, they share the same base functionality. This means that you can create a form with any input type by simply adding it to the <Formkit /> component.

FormKit Inputs are similar to HTML inputs but turbocharged with much needed 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" />

The Form Input
While you’re free to use FormKit inputs by themselves, you’ll usually want to group them into a form. To do this, simply wrap your inputs in a <FormKit type="form">

The form type will actively collect all the values from child inputs, using the name of each input as the property name in the resulting data object (just like groups). You can also read and write to form values using v-model just as you would on any input.

<template>
  <FormKit
    type="form"
    submit-label="Login"
    @submit="login"
  >
    <FormKit
      name="email"
      label="Email address"
      validation="required|email"
    />
    <FormKit
      type="password"
      name="password"
      label="Password"
      validation="required"
    />
  </FormKit>
</template>

Formkit schema
FormKit schema is a JSON-serializable data format for storing DOM structures and component implementations, including FormKit forms. Although created specifically for implementing and generating forms, the format is capable of generating any HTML markup or using any third-party components.
Schemas are rendered using FormKit’s <FormKitSchema> component, which is not registered globally by default. You will need to import it.

FormKit ships with first-class support for generating forms using schema. This makes it possible to store generated forms in databases, files, or even QR codes! To generate a form, pass your schema array to the <FormKitSchema> component using the :schema prop.

<script setup>
import { reactive } from 'vue'

const schema = [
  {
    $formkit: 'text',
    name: 'email',
    label: 'Email',
    help: 'This will be used for your account.',
    validation: 'required|email',
  },
  {
    $formkit: 'password',
    name: 'password',
    label: 'Password',
    help: 'Enter your new password.',
    validation: 'required|length:5,16',
  }
]

const data = reactive({})

</script>

<template>
  <FormKitSchema
    :schema="schema"
    :data="data"
  />
</template>

Validation

FormKit makes front end validation simple by letting you declare your validation rules directly on your inputs. It’s easy to write custom rules too, but you’ll rarely need to with 20+ production-ready rules.

<template>
  <!-- String syntax -->
  <FormKit
    type="text"
    label="Number"
    validation="required|number|between:20,50"
    validation-visibility="live"
    help="Enter a number between 20 and 50."
  />

  <!-- Array syntax -->
  <FormKit
    type="text"
    label="Phone"
    placeholder="xxx-xxx-xxxx"
    :validation="[['required'], ['matches', /^\d{3}-\d{3}-\d{4}$/]]"
    validation-visibility="live"
    :validation-messages="{matches: 'Phone number must be formatted: xxx-xxx-xxxx',}"
  />
</template>

FormKit ships with over 20 production-ready validation rules, covering most validation needs. If you don’t find one that meets your exact requirement, you can add a custom rule to suit your needs.

Styling

FormKit ships robust and accessible markup — but with no assumptions about your desired styles. There is an optional base theme (as seen in these docs) called Genesis that you can use in your projects.

Custom classes
Most users will want to apply their own styles and classes to FormKit’s provided markup. FormKit provides numerous methods to apply classes for your project.
Classes can be modified for all sections using any of the following methods (from highest to lowest specificity):

• The {section-key}-class props (most specific)
• The classes prop
• The classes configuration option
• The rootClasses configuration function (least specific)

Outer attributes
These are attributes that developers can use to style the input to help provide better feedback to the user on how it is being filled. data-type , data-invalid, data-multiple, data-complete, and data-errors are styled in CSS as simple HTML attributes:

<style>
[data-invalid] .formkit-inner {
  border-color: red;
}

[data-complete] .formkit-inner {
  border-color: green;
}

</style>

Modifying classes within schema
Schemas can be styled as much as the form component. They enable attributes and props binding, making it easy to add classes and properties on your forms.

const schema = [
  {
    $formkit: 'text',
    name: 'email',
    // modifies classes on both the "outer" and "inner" sections of this input
    classes: {
      outer: 'new-outer-class',
      inner: {
        $reset: true, // resets classes on the "inner" section
        'new-inner-class': true
      }
    },
  },
]

Styling with Tailwind CSS
If you have not already, add Tailwind CSS to your project following their installation instructions
FormKit provides a Tailwind version of the Genesis theme you can use as a starting point in your own project. To use this pre-made Tailwind theme copy the following theme into a file (something like tailwind-theme.js) in your project.

Conclusion

FormKit is a framework for creating forms in Vue.js with features such as validation, styling, and internationalization. It is based on the popular VueFormulate library, but offers more flexibility and customization options. Some of the benefits of using FormKit are:

• It supports a wide range of input types, such as text, number, date, select, checkbox, radio, file, and more.
• It allows generating forms from a JSON schema, which makes it easy to create dynamic and complex forms
• It provides built-in validation rules and custom error messages, as well as the ability to create custom validation rules and plugins.
• It enables styling forms with CSS classes, themes, and slots, as well as the ability to create custom form inputs and behaviors.
• It supports internationalization (i18n) and localization of forms, labels, and messages.
• It has a comprehensive documentation and a playground where you can try out FormKit features and examples.

References:

https://formkit.com/