Building accessible forms in Vue with Formkit ⚡️

When I first learned about Formkit, I wasn't sure if I understand the its use case. Now after building few applications with it, I can truly say that it is an amazing piece of software!

The general idea is to have a form building framework where all the form logic is delivered by the Formkit so that we can focus on styling and adjusting (instead of building the whole form process from scratch).

In my opinion, these kind of tools are really great because they deliver certain web technology and process directly to your door, while you only have to focus on styling it the way you want. In the world of generic UI librararies where almost all of them do essentially the same thing, library such as Formkit really shines! ⚡️

In this article, I will share with you the general idea so that you can try it for yourself in your projects 😉

What is Formkit?

FormKit is far more than a UI library. It is a comprehensive form building framework for Vue developers that makes authoring high quality production-ready forms faster, more accessible, with better DX and UX, and less code. It is easy to learn, and ships with production-ready features like inputs, validation rules, and submission/error handling.

Below, you can see a short video intro to Formkit and what problems does it solve:

Forms seem simple. After all, a

and an tag are all that's required. Yet, experienced engineers know that implementing production-ready forms is tedious and complicated. FormKit's key features were designed to solve these problems, while making form authoring efficient and enjoyable for developers:

• 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.

Let's take a look at the next section, to see how we can use it in Vue!

Building a project with Formkit

When I first looked at the Formkit documentation, I was really amazed by its quality. Everything was clean and up to the point. Not to mention the great wizard for building projects in Vue, Nuxt, or Astro that you can check out below:

This will guide you through the process of installation and setup so that you can start building your forms easily.

There is a great page by Formkit that shows you how to build your first form that I will link here

I won't be copying all the examples (they are explained brilliantly in the official docs) but I just want to show you one thing.

With Formkit, you can build any type of form. Take a look at the most basic example:

<FormKit type="text" />

And now, take a look at this more advanced case:

<FormKit
  type="range"
  name="strength"
  id="strength"
  label="Strength"
  value="5"
  validation="min:2|max:9"
  validation-visibility="live"
  min="1"
  max="10"
  step="1"
  help="How many strength points should this character have?"
/>

What is great about it is that you are using one component and you can customize it the way you want. And you have documentation for any type or use case!

If you would like to try Formkit for yourself without adding it to your project yet, Formkit has a great playground where you can test it, build forms, and see how they behave:

You can check it out here

If you are looking for more materials about Formkit, check out the following course by VueSchool here

Summary

Formkit offers a big number of features for free to use by anyone. If you are looking for more advanced and enterprise use cases, they also have a Pro tier where you get access to the these advanced components. You can check more details here

I really recommend you to try it out as it handles all the things that you would need to create by yourself such as logic, accessibility, validation and more!