Theme

Build Vue 3 forms
10x faster.

A Vue form building framework that simplifies form structure, generation, validation, theming, submission, error handling, and more.

Jul 29, 2022

Beta.10 released! Introduces Input family types for plugins / styling, customizable decorator icons for checkboxes and radios, and more! View the changelog.

Everything for Vue forms in one package

No more disparate packages for form scaffolding, UI, validation, generation, or data management. Full SSR support. Easy back-end error handling, show server error messages on the correct inputs. TypeScript support.

FormKit is your one-stop solution for high-end Vue forms in your web applications. It includes everything you need — labels, help text, theming support, validation, form generation from JSON, accessibility, internationalization and more!

Load Live Example

Try changing type="select" on line 10 to radio or checkbox.

Validation built in

Easy to configure. Support for async validation rules. No more tears integrating back-end errors.

FormKit ships with over 20 built-in validation rules equipping you to smoothly guide users through their content entry. Custom async validation rules are supported out-of-the-box and are easy to author.

Not only that — FormKit ships with support for back-end error handling. Take your server-side error response object and give it to FormKit and you’ll get your error messages back on the inputs they belong to.

Validation docs

Load Live Example

Powerful form generation

Model your entire form in portable FormKit schema. Render anything — not just FormKit inputs. Support for conditional logic, dynamic functions, and more inside a familiar JSON structure.

Even the most complex forms can be represented using FormKit schema. Written from the ground-up, FormKit's schema supports conditional rendering, boolean logic, comparison and arithmetic expressions, dynamic functions, and rendering of HTML and third-party Vue components.

Additionally, all FormKit inputs are built using schema allowing for selective overrides of markup with extremely high specificity.

Form generation docs

Load Live Example

Try changing pricePerUser on line 2 to see the schema-powered form re-render.

Robust theming including Tailwind support

Support for custom CSS, pre-baked themes, and utility class frameworks like Tailwind. An extensive class override system allows for easy one-offs when you need them.

Everyone has their preferred way to apply styles to their Vue forms. Some prefer rolling their own CSS, some adopt opinionated UI frameworks, and others prefer creating custom combinations of utility classes from tools such as Tailwind. FormKit is flexible enough to support them all.

Styling docs

Load Live Example

Open source and free to use

FormKit Core is open source and will always be free. 10x your development speed with all native HTML input types.

FormKit Core will always be open source and free to use within your projects. You can use FormKit Core — which aims to cover all native HTML input types — without worrying about licensing restrictions or fees.

Get started

Go Pro with production-ready synthetic input types

Sign up for Pro

Need more?
Build it with first-class plugin support

FormKit core functions are written as plugins. Easily add powerful upgrades to an entire form or specific inputs.

Plugins are first-class citizens in the FormKit ecosystem — in fact many core functions such as Validation, Internationalization, and Theming are authored as first-party plugins using the same APIs available to third-party developers.

But wait, there's more! FormKit ships with a comprehensive feature set — your one-stop shop for Vue form development.

High-Performance
FormKit can handle the most demanding forms — wizards, multi-step, deeply nested repeating groups, and more.
Conditional Logic
Whether using templating or schema-generation — easily customize the flow of your forms based on user interactions.
Hooks & Events
Create powerful foundation-altering plugins with deep access to core internals.
Built-in Messaging
Display information about your form to users down to the input level — validation errors, hints, success messages, and more.
Internationalization
FormKit supports multiple languages and can switch on the fly. It’s also easy to contribute your own with our helpful i18n generation tool.
Get Started