Introducing KickStart —  AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free

Yar! Open-source form buildin' for those who be eyein Vue

FormKit be the tool for developers, allowing ye to construct yer forms at a pace 10 times faster, it does. By simplifying the structure, generation, validation, theming of forms, submissions, catching any blunders, 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 wee data-first tool for ye draggin' and droppin'

FormKit Drag and Drop be a fresh open-source library that makes workin' with draggin' and droppin' as easy as sailin' the high seas. It’s less than ~4kb and can be used in any JavaScript application, arrr.

Forms 'n swag

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

Inputs for ye swabbies

24+ accessible inputs powered by a single component, arrr.

Prevent Blunderin'

20+ built-in validation rules and support for writin' your own, arrr.

Deckin' out

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

Ship Buildin'

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

Battle plannin'

Engineered to handle the most demandin' forms, arrr.

Expedition financiers

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

Ahoy! Behold FormKit Themes

Open-source, MIT-licensed, Tailwind themes fer FormKit, arrr.

Preview of FormKit Regenesis theme

Forms 'n swag

Populate a form with a single treasure mapAuto collects all input doubloonsApply backend errors to forms and inputsAccess any form doubloon without v-modelOptionally v-model an entire form with one treasure mapAutomatic 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 for ye swabbies

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 doubloons with middlewareAutomatic DOM for label, help, messages, and moreSupports conditional inputsSlots for every DOM element
Load live example

Try changin' type="radio" on line 5 to checkbox.

Prevent Blunderin'

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

Deckin' out

Stylin' approach be as free as the seaOptional first-party colors of the Jolly RogerTailwind sailsSupport fer utility CSS planksAdd markings to any ship's hullOverride any ship's hullDynamic flags that track the windBuilt-in treasure chest o' iconsUse yer own SVG mapsEasy integration with 3rd-party treasure maps
Load live example

Ship Buildin'

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

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

Battle plannin'

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, arrr

Powerful commercial form controls, same great API, me hearties.

  • 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, me hearties.