Try changing type="select" on line 10 to
radio or checkbox.
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
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.
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.
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.
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.
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.