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.

FormKit KickStart

KickStart your next FormKit form in seconds. Generate from a prompt, image, or text attachment. Copy & paste as Vue components or FormKit schema.

drag-and-drop

A tiny data-first drag and drop library

FormKit Drag and Drop is a new open-source library that makes working with drag-and-drop operations a breeze. It’s less than ~4kb and can be used in any JavaScript application.

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.

Supported by

  • Vue School logo
  • Fieldman logo
new — v.1.4.0

Introducing FormKit Themes

Open-source, MIT-licensed, Tailwind themes for FormKit.

Preview of FormKit Regenesis theme

Forms

Populate a form with a single objectAuto collects all input valuesApply backend errors to forms and inputsAccess any form value without v-model Optionally v-model an entire form with one objectAutomatic loading state for async submissionsState tracking for invalid, loading, errors, and moreEasily disable all inputs in a formForm resetStructure 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-inState tracking for invalid, loading, errors, and moreExport to restructure input HTMLCreate custom inputsControl input values with middlewareAutomatic DOM for label, help, messages, and moreSupports conditional inputsSlots for every DOM element
Load live example

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

Validation

Apply rules in a single propIncludes validation messages in 40+ languagesControl when errors showSupport for async rulesDebounce expensive validation rulesBlock form submission until validation passesSupport for optional and conditional rulesAdd custom rules and validation messagesForm & input-level messages
Load live example

Styling

Styling approach agnosticOptional first-party themeTailwind themesSupport for utility CSS frameworksAdd classes to any DOM elementOverride any DOM elementDynamic attributes that track stateBuilt-in icon packUse your own SVG iconsEasy integration with 3rd-party icon libraries
Load live example

Schema

JSON-compatible formatRenders any DOM and componentsBoolean logic, comparison, arithmetic expressionsReference reactive data within schemaSupports list rendering Renders any named slotConditional renderingShorthand for rendering FormKit inputsStore schema anywhere
Load live example

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

Architecture

Zero third-party dependenciesTypeScript supportTree-shakableExtend with pluginsPlugins can be applied at an input, group, or global levelShare code across inputs with featuresExtend with hooksEvent systemWrite your own inputsFull SSR supportWrap 3rd-party inputsCLI toolCustomize with FormKit configActive community & supportInternationalization architectureHierarchical input structure
Load live example
FormKit Pro

Supercharge FormKit with optional Pro inputs

Powerful commercial form controls, same great API.

  • Autocomplete
  • Colorpicker
  • Currency
  • Datepicker
  • Dropdown
  • Mask
  • Rating
  • Repeaterfree
  • Slider
  • Taglist
  • Togglefree
  • Toggle Buttonsfree
  • Transfer List
  • Unit

Autocomplete

Search and select from a custom options list.