Theme

The open-source form framework for Vue

FormKit equips developers to build their forms 10x faster by simplifying form structure, generation, validation, theming, submission, error handling, and more.

Forms

Powerful form features for data flow, error handling, and state management.

Inputs

24+ accessible inputs powered by a single component.

Validation

20+ built-in validation rules and support for writing your own.

Styling

Use FormKit’s default Genesis CSS theme, Tailwind, or your own custom approach with full control over every DOM element.

Schema

Generate forms with FormKit’s JSON-compatible dynamic schema. Fully serializable for database storage.

Architecture

Engineered to handle the most demanding forms.

Forms

Populate a form with a single object Auto collects all input values Apply backend errors to forms and inputs Access any form value without v-model Optionally v-model an entire form with one object Automatic loading state for async submissions State tracking for invalid, loading, errors, and more Easily disable all inputs in a form Form reset Structure your data as objects, arrays, and scalar values
Load Live Example

Inputs

Entire structure in 1 component <FormKit /> Includes every input type (24+) Accessibility built-in State tracking for invalid, loading, errors, and more Export to restructure input HTML Create custom inputs Control input values with middleware Automatic DOM for label, help, messages, and more Supports conditional inputs Slots for every DOM element
Load Live Example

Try changing type="radio" on line 5 to checkbox.

Validation

Apply rules in a single prop Includes validation messages in 40+ languages Control when errors show Support for async rules Debounce expensive validation rules Block form submision until validation passes Support for optional and conditional rules Add custom rules and validation messages Form & input-level messages
Load Live Example

Styling

Styling approach agnostic Optional first-party theme Support for Tailwind and other utility CSS frameworks Add classes to any DOM element Override any DOM element Dynamic attributes that track state Built-in icon pack Use your own SVG icons Easy integration with 3rd-party icon libraries
Load Live Example

Schema

JSON-compatible format Renders any DOM and components Boolean logic, comparison, arithmetic expressions Reference reactive data within schema Supports list rendering Renders any named slot Conditional rendering Shorthand for rendering FormKit inputs Store schema anywhere
Load Live Example

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

Architecture

Zero third-party dependencies TypeScript support Tree-shakable Extend with plugins Plugins can be applied at an input, group, or global level Share code across inputs with features Extend with hooks Event system Write your own inputs Full SSR support Wrap 3rd-party inputs CLI tool Customize with FormKit config Active community & support Internationalization architecture Hierarchical input structure
Load Live Example
FormKit Pro

Supercharge FormKit with optional Pro inputs

Powerful commercial form controls, same great API.

  • Autocomplete
  • Datepicker
  • Dropdown
  • Mask
  • Rating
  • Repeaterfree
  • Taglist
  • Togglefree
  • Transfer List

Autocomplete

Search and select from a custom options list.

Tokyo
New York City
Rio de Janeiro
Search for large cities you'd like to visit.