February 6, 2023

This release adds new 1st-party plugins to the @formkit/addons package, ships bug fixes and styling updates for both CSS and Tailwind CSS users.

💪 New features

• Easily create multi-step forms or include multi-step sections inside your forms with the new multi-step plugin in @formkit/addons. Ships with standalone CSS styling you can import that works well with our genesis theme. Check out the full documentation here.
• Enable floating labels for all text family (text, email, url, etc) and textarea inputs with the new floating labels plugin in @formkit/addons. Check out the full documentation here.
• Adds new Next and Previous strings to UI localization object for use in plugins and custom inputs.

🐛 Bug fixes

• Fixes missing Tailwind CSS genesis theme export path in @formkit/themes.
• Adds :focus-visible styling to buttons to show focus state when using keyboard navigation.
• Adds missing loading styles for submit buttons in the Tailwind CSS Genesis theme.

📘 Articles

• New Article: Create a Multi-Step form in Vue in 5 Minutes

January 21, 2023

This release addresses some issues for Tailwind users that were introduced in beta.13.

🐛 Bug fixes

• Reverts @formkit/themes/tailwindcss to only include a default export of the FormKitVariants plugin.
• Moves the provided Tailwind Genesis theme to a new export path of @formkit/themes/dist/tailwindcss/genesis.
• Changes remove class operator from ! to $remove: in order to not conflict with Tailwind's built-in ! operator that adds !important to a style rule.
• Fixes issue where default icons would not load when using the provided FormKit Tailwind Genesis theme.

January 19, 2023

💪 New features

• Adds new <FormKitMessages> component which allows relocation of a form’s validation and error messages and the ability for group and list inputs to display their own error and validation messages.
• When removing classes on a section of a FormKit input you can use the ! prefix operator to selectively remove an existing class without needing to use the long-form object syntax. eg outer-class="my-class !formkit-outer" adds my-class and removes the default formkit-outer class.
• Adds Catalan (thanks @petergithubmgw).
• The checkbox and radio inputs now have a data-checked attribute around their respective wrapper making it easy to add custom styling for checked vs non-checked states.
• Improves validation messages in a handful of languages (en, pt, zh).
• Pro: New Mask Pro input.
• Pro: Adds empty-message prop allows for message to be rendered in listbox when no options are passed (dropdown, autocomplete, and taglist). #502
• Pro: Adds checked attribute to formkit-option (dropdown, autocomplete, taglist). #350
• Pro: Adds max prop for taglist and autocomplete with multiple inputs. #501
• Pro: Adds closeOnSelect prop will keep the listbox expanded as selections are made (autocomplete multiple and taglist).
• Pro: Adds forceExpanded prop forces the listbox to remain open for dev purposes (dropdown, autocomplete, and taglist).
• Pro: All Pro inputs can now be disabled via disabled attribute.

🐛 Bug fixes

• Fixed a bug where date_after rule showed a incorrect validation message because of timezones. #488
• Fixed a bug where self-generated ids did not have an attribute-safe value because of special characters. #517
• v-model values can now be initialized as undefined. #235
• Fixed a bug that caused inline validation-rules props to recurse unexpectedly. #514
• Fixed a bug that caused the label of checkboxes with multiple options to not be overridden with sections-schema. #541
• Fixed a bug that caused labels to not change dynamically in already-rendered validation messages. #297
• Fixed a bug that caused the disabled prop to need null instead of false to render the data-disabled attribute on the outer wrapper. #511
• Fixed a bug that prevented slots from being conditional (ie using v-if on the <template v-slot> block). #489
• Fixed Nuxt and Nuxt playground compatibility issues.
• Fixed a bug that caused sections using to not properly respect sections-schema prop.
• Fixed an issue with Tailwind prefix and suffix icon variants. #530
• Pro: Fixed a taglist bug where duplicate options were loaded from API. #497
• Pro: Fixed a bug where the taglist would render duplicate props when multiple prop set to false. #494
• Pro: Fixed a bug where autocomplete options were duplicating when being used fast, repeatedly, or with pasted content. #431
• Pro: Fixed issue where default value for autocomplete and taglist could not be removed when the provided value was an object literal. #505
• Pro: Fixed an issue where the listbox was still visible when no options were passed. #504

📙 Documentation & Playground

• New API Reference — TypeScript users rejoice! The API Reference exposes previously undocumented functionality.
• New Tailwind implementation of our Genesis theme.
• When choosing Tailwind CSS in the FormKit Playground the new FormKit Tailwind Genesis theme is loaded automatically for you if your Playground does not already have a formkit.config.js file.

November 15, 2022

💪 New features

• Pro: New Taglist Pro Input now available!
• Adds npx formkit create-app command to easily bootstrap new FormKit projects.
• Improves length rule validation messages across all languages.
• Adds 🇬🇷 Greek (uk) language #460.
• Adds 🇳🇴 Norwegian Bokmål (nb) language #418.
• Adds 🇸🇰 Slovak (sk) language #401.
• Pro: All Pro Inputs can now be disabled.
• Pro: Improvements to Genesis Pro theme.
• Pro: Autocompletes with multiple options selected can now be re-ordered via drag & drop.
• Pro: Added missing attrs to the message schema.

🐛 Bug fixes

• Fixed a bug where the label slot didn't work without the label prop #456.
• Fixed a bug where you couldn't dynamically change available validation rules #449.
• Fixed a bug where swapping keys would not clear an input's value when inside a group. #446.
• Fixed a bug where Date object methods were inaccessible from Schema #406.
• Fixed a pathing issue that made it difficult for third-parties from accessing files #404.
• Fixed a bug that prevented the stopIfFalse argument on the walkTree function.
• Fixed a bug where a select input initialized with a null value doesn't have a good value #415.
• Pro: Fixed a bug count:blocking event was not emitting properly in Repeaters.
• Pro: Updated Repeater indexes to be numbers instead of strings. #422.
• Pro: Fixed an autocomplete bug where the next page of options was overriding the current page. #447.
• Pro: Fixed a bug where Pro inputs were not showing validation messages on blur #403.

September 29, 2022

🎉 New features

• Lays foundation for FormKit Pro Inputs!

🐛 Bug fixes

• Fixed a bug where the "help" slot appeared twice for checkbox and radio elements #353.
• Fixed a bug that caused the FormKit AutoAnimate plugin to fail with Nuxt #361.
• Fixed a schema bug where a dot-notation reference to a non-existing sub property causes [Object object] to output after the reference does exists #368.
• FormKit now works with Nuxt 3.0.0-rc.8 and 3.0.0-rc.9 #371 and #383.
• Fixed a bug where users were unable to use hooks via plugin to update v-modeled values #391.
• Fixed a bug where users were unable to import @formkit/themes/tailwindcss with TypeScript #376.
• Fixed a bug that caused default icons to never load when included directly in the configuration.
• Fixed a bug where a checkbox validation with "required" worked only the first time #169.

July 29, 2022

🎉 New features

• Input definitions now have an optional family property, which adds a data-family attribute, and sets the value on node.props.family. This is useful for applying plugins and styles to entire "families" of inputs like the text family of inputs, which would apply to text, email, password, number, etc.
• Input definitions now include an optional forceTypeProp property which ensures the node.props.type is initialized as a given value even if the input is registered under a different name. For example myModifiedCheckbox could still have node.props.type report "checkbox".
• Adds data-multiple attribute to checkboxes and radios when they have multiple options.
• Adds new @submit-invalid event to type="form" inputs. The event is triggered when a user attempts to submit a form but it has invalid inputs.
• Adds new getValidationMessages helper function to @formkit/validation that extracts a Map of nodes and their validation messages.
• Adds new decorator-icon section to checkboxes and radios, making it easy to use custom SVGs in your checkboxes and radios.
• Adds new "check" and "circle" icons to the built in icon pack.
• Adds 🇦🇿 Azerbaijani (az) language.
• Adds 🇺🇦 Ukrainian (uk) language.

🐛 Bug fixes

• Fixed a regression where a single checkbox was no longer displaying the help text (#310).
• Fixed a bug that caused the AutoAnimate plugin to fail on Nuxt SSR (#330).
• Fixed a bug that caused all input’s context.state.dirty to turn true when a v-modeled form was edited (#311).
• Fixed a bug that caused a race condition between the @change event of a select list and the v-model value propagation (#335).
• Fixed a bug that caused conditional props/attrs that returned arrays to return objects instead of arrays (#317).
• Fixed a bug that caused empty file inputs to be set to undefined instead of an empty array when node.reset() is called (#319).
• Fixed a bug that caused the disabled prop to improperly disable checkboxes and radio inputs when set to a falsy (not nullish) value (#307).

⚠️ Breaking changes

• The file input’s removeFiles section has been renamed to fileRemove.
• The fileRemove (previously removeFiles) section used to rendered an <a> tag, this has been changed to a button.
• Composables from @formkit/inputs have been replaced with "sections". This should only affect users who were creating their own inputs from pre-existing composables.

🎉 New features

• Icons! FormKit now ships with first class support for icons, including a first-party MIT licensed icon pack with automatic CDN delivery. Read more about it on the new icons documentation page.
• AutoAnimate! FormKit now includes an AutoAnimate plugin, bringing AutoAnimate support to FormKit with a single line of code.
• Exports! You can now export any of the existing inputs and restructure them at will using the new @formkit/cli command line tool. Alter existing inputs by adding, removing, updating, or re-ordering sections — or add your own exported and altered input variations to your input library.
• All inputs have been refactored to use a much improved schema composition API that allows easy composition and modification of schema based inputs.
• Adds new meta property to schema specification (#248).
• FormKit CSS themes can be installed via CDN using the new theme option in defaultConfig()
• Adds new submit and setErrors hooks.
• Adds 🇧🇬 Bulgarian language.
• Adds 🇭🇺 Hungarian language.
• Adds 🇰🇿 Kazakh language.
• Adds 🇷🇸 Serbian language.
• Adds 🇹🇯 Tajik language.

🐛 Bug fixes

• Fixed a bug that caused the key property to not work when using the $formkit shorthand in schema (#232).
• Fixed a bug that did not call event handlers on @blur (#239).
• Fixed a bug that caused 1 too many for iterations on old Safari browsers (#299).
• Added automatic keys to FormKit inputs which fixed a smattering reactivity bugs when explicit keys were not used with conditional inputs.
• The input-errors prop will now reset any errors it previously set when set to an empty object {} (#277).
• Adds support for Czech/Slovak diacritics in alpha and alpha_spaces rules (#281).

📙 Documentation

• New docs page for FormKit Icons 🎉.
• New guide for exporting and restructuring icons!
• New docs using the AutoAnimate plugin.
• Input diagrams include new icon sections.

⚠️ Breaking changes

• The update:model-value event will now only be emitted when using the v-model directive.
• The input event is now debounced to reduce the amount of noise being emitted. You can use the new input-raw to listen to every input event.
• Errors set via setErrors are now automatically cleared on input by default. To revert to the previous behavior, set preserveErrors: true in your global config object.
• The @formkit/tailwindcss package is now deprecated — both the formKitTailwind plugin and the generateClasses function have been moved to the @formkit/themes package.

🎉 New features

• checkbox, radio, and select inputs (inputs that use :options) can now use any data type as their value like numbers, objects, or even null (#85).
• Adds new node.clearErrors and clearErrors utilities to assist in clearing backend errors from an input or form.
• Now inputs automatically clear any errors set with node.setErrors() on user input. You can override this default behavior (to keep the error on the input) with preserve-errors="true".
• Adds a new node.addProps function for adding new props in custom plugins.
• Adds new message hook for modifying messages as they are being set.
• Adds a new core event reset — emitted after a form is reset.
• Adds a new index prop that allows inputs to be injected at a given index on a parent list type.
• The <FormKit> component’s input event is now debounced, meaning it emits much less noise.
• Exports all input feature functions import { features } from '@formkit/inputs'.
• Adds a new input-raw event to the <FormKit> component which is emitted for every single input event in an input, list, group, or form (very noisy).
• The core node is now the second argument of the input, input-raw, submit and submit-raw events.
• Adds new core node event dom-input-event which has the native HTML Event object as the payload.
• @formkit/themes now includes named exports for plugin functions for Tailwind CSS (formKitTailwind), Windi CSS (formKitWindi), and Uno CSS (formKitUno). By adding the correct plugin to your CSS framework's configuration file you will have access to a variety of formkit variants such as formkit-invalid: and formkit-disabled:.
• @formkit/themes now includes the generateClasses helper function will allows you to easily supply different class lists to ${sectionKey}s based on input type.
• Adds 🇸🇪 Swedish language.
• Adds 🇸🇮 Slovenian language.
• Adds 🇷🇴 Romanian language.
• Adds 🇯🇵 Japanese language.
• Adds 🇹🇭 Thai language.
• Improves 🇵🇱 Polish language.

🐛 Bug fixes

• 🔥 Dramatically improves v-model performance and reliability for deeply nested structures like forms with list and groups.
• Fixes an issue that caused null values to throw errors (#151)
• Fixed a bug that caused validation-visibility to not change when updated reactively (#159)
• Fixes a bug that caused the preserve keyword to block some form submissions (#145)
• Fixes TypeScript typing for the @formkit/tailwind configuration (#143)
• Fixes a bug that caused single checkboxes with an object as the on-value to not be set their initial value when using the :value prop.
• Fixes a bug that caused validation rules to not be updated when the label prop changed (#170)
• Fixes a bug that caused incorrect default selection on select lists with an explicit multiple="false" attribute and a placeholder (#148).
• Fixes a bug that caused the classes prop to not react to Vue’s reactivity when using nested refs (#155).
• Fixes a bug that prevented submit buttons from being disabled when applied using using the disabled attribute on the form without specifying disabled="true" (#215)
• Fixes a schema compiler bug that caused the white space of a quoted string in a parenthesis to be incorrectly removed (#150).

⚠️ Breaking change

• The genesis theme should now be imported from import '@formkit/themes/genesis.

🎉 New features

• Adds programmatic form submission:
  • Can be submitted by node node.submit() (including any child node of the form).
  • Can be submitted via function this.$formkit.submit('form-id') (for composition api it's submitForm('form-id')).
• Improved setErrors DX:
  • Can now be called directly on a node node.setErrors(nodeErrors, childErrors).
  • setErrors now supports pure string node.setErrors('My error')
• Submit handler is now passed the form’s node for easy error setting.
• A <FormKit> component’s core node is now available via template ref.
• Adds data-invalid attribute to the outer section when an input has failing validation messages that are currently displayed (playground example).
• Adds data-errors attribute to the outer section when the input has explicitly placed errors (via prop or setErrors).
• Adds data-complete attribute to the outer section when an input (playground example):
  • Either:
    • The input has validation rules.
    • The validation rules are all passing.
    • There are no errors on the input.
  • Or:
    • The input has no validation rules.
    • The input has no errors.
    • The input is dirty and has a value.
• New context.state properties:
  • state.rules - true when the input has validation rules.
  • state.errors - true when the input has explicit errors placed on it.
  • state.complete - same as logic as data-complete.
  • state.validationVisible - true when the validation-visibility condition is met (it is showing validation errors if there are any).
• Refactors the Nuxt 3 module for faster build time and better file resolution.
• Adds 🇮🇷 Persian language support (thanks @shahabbasian)
• Adds 🇧🇷 Portuguese language support (thanks @r-martins)
• Adds 🇹🇷 Turkish language support (thanks @ragokan)
• Adds 🇫🇮 Finish language support (thanks @mihqusta)
• Adds 🇦🇷 Spanish language support (thanks @inibg)

📙 Documentation

• Added node.setErrors documentation.
• Added programmatic form submission documentation.
• Improved context.state documentation with new properties and better descriptions.

🐛 Bug fixes

• Fixes an issue that cause server side rendering and server side generation on Nuxt and vite-ssg/vitesse to throw exceptions during build process (#81).
• Fixes a bug that prevented file inputs from triggering custom onChange events (#90).
• Fixes a bug that prevented forms from outputting their id to the DOM.
• Fixes a styling issue in the genesis theme that cause select lists items to be grey before an option was selected when using a placeholder (#59)
• Fixes a bug that caused the :value prop on forms to be mutated on input (#72).
• Fixes inconsistency between prop:{propName} events emitted by default props and custom input defined props (#73)