Try changin' type="radio" on line 5 to checkbox.
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!
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
new — v.1.4.0
Ahoy! Behold FormKit Themes
Open-source, MIT-licensed, Tailwind themes fer FormKit, arrr.
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 valuesLoad 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 elementLoad live example
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 structureLoad 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.