It's insane how good FormKit is!

What is FormKit

FormKit is a form-building framework for Vue. It lets you create complex forms faster with top-notch DX, UX, and accessibility. Currently, it's in beta version but the library is soon celebrating the first official 1.0 release with the awesome event called "The Celebration of Vue".

Do you need a form framework?

Well, are complex forms easy? No 🙁
Is making forms in Vue easier than let's say React? Hell yes! 😎

Why? Because of two-way data binding thanks to v-model. I would say that for simple form data collection, you don't need any library at all.

Let's say you have a form with 3 fields:

• username
• email
• password

It's really easy to store the form values in a single form object with full-reactivity. You can do it this way:

<template>
    <form>
        <input v-model="form.username" type="text" placeholder="username"/>
        <input v-model="form.email" type="text" placeholder="e-mail"/>
        <input v-model="form.password" type="password" placeholder="password"/>
        <button type="button" @click="submitForm">Submit</button>
    </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const form = ref({
  username: '',
  email: '',
  password: ''
});

function submitForm() {
  console.log('submit form', form.value);
}
</script>

As you can see, it's not that complicated thanks to v-model directive. But what about validation, localization, accessible form controls, and multistep forms? That's where FormKit comes in handy!

Why is it awesome?

1) Because is a full-fledged and comprehensive solution for forms

Libraries like Vee-Validate are great but their main focus is Validation. UI libraries with form components focus mostly on UI and not complex form handling. FormKit is not a UI library so you have to care about styling by yourself (or use a built-in theme) so it gives you a lot of flexibility about the visual aspect of your components.

2) Building forms is fast

With FormKit some tedious and repetitive tasks are happening automatically. Form values binding, validation (if specified) and, managing the input states (dirty, touched, untouched, etc.).

3) Single component architecture

Everything you will ever need in FormKit is <FormKit></FormKit> component. You just manipulate the type of input and it will load the specified UI control component.

Let's say you want to use the checkbox:

<FormKit
    type="checkbox"
    label="Terms and Conditions"
    help="Do you agree to our terms of service?"
    name="terms"
    :value="true"
/>

Looks pretty straightforward, right?

4) Fantastic input types

The quality of various input types components is amazing. It doesn't matter if you need a simple text input or more complex slider or a week selector. You have it all in FormKit. There are some standard inputs as well as paid ones in the PRO version:

Free inputs:

• Button
• Checkbox
• Color
• Date
• Datetime-local
• Email
• File
• Form
• Month
• Number
• Password
• Radio
• Range
• Search
• Select
• Submit
• Telephone
• Text
• Textarea
• Time
• URL
• Week

PRO version inputs:

• Autocomplete
• Datepicker
• Dropdown
• Mask
• Rating
• Repeater
• Slider
• Taglist
• Toggle
• Transfer List

5) Great validation

FormKit has many useful validation rules and it's really simple to add validation rules to the Inputs. How would it look like to validate if some number is within the specified range?

Simple:

<FormKit
  type="text"
  label="Number"
  validation="required|number|between:20,50"
  validation-visibility="live"
/>

You can check the list of all available rules here.

Do you prefer solutions like zod? No problem at all! You can validate your FormKit forms by zod using a dedicated plugin.

You can also specify the validation strategy with validation-visibility prop.

6) Accessibility out of the box

Accessibility is hard. It's not debatable. Thankfully FormKit inputs have great accessibility providing accessible DOM structure and navigation.

7) Amazing plugins

Do you want to create a multi-step form? Cool, that's what the Multi-Step Input plugin is doing. Floating labels, animations, barcode scanner? FormKit has it all!

List of current plugins:

• AutoAnimate
• Auto-height textarea
• Barcode input
• Floating labels
• Multi-step Input
• Save to localStorage
• Zod validation

8) Great docs

Often overlooked but for me one of the most important aspects of a good library. FormKit docs is beautiful and you can find everything you need. It provides a lot of explanations, examples, and use cases. Oh, and it is available in the Pirate language 🏴‍☠️.

Summary

FormKit is a great library, maintained by really talented people with strong attention to detail. If you are building complex forms I would say that right now this is the best option out of the other (also great) libraries for forms. I'm pretty sure that this will be a long-term project and there is no risk for it to be dead somewhere in the future. It's ready for prod baby!

Follow me on twitter:
https://twitter.com/michalkuncio

And check out my website:
https://michalkuncio.com/