
formkit
Go to documentationSeamless FormKit integration for Nuxt
v1.1.0 by
justin-schroeder
💪 New features
- Adds new
<FormKitProvider :config="yourConfig">
— a component that defines a new configuration boundary. Any<FormKit>
components that are nested beneath a<FormKitProvider>
will inherit their configuration from this location. - Adds a new
<FormKitLazyProvider>
which checks for a higher order<Suspense>
boundary (if not found it injects one) and injects a<FormKitConfigLoader>
component. - Adds a new
<FormKitConfigLoader>
component. An async component that performs a dynamic import for a configuration file.
Note: The new components listed above are currently experimental and will be documented further as the API stabilizes.
🐛 Bug Fixes
- Fixes a bug in the TypeScript definition of the
<FormKit>
component that causes a TypeScript error in Vue Language Tools (Volar) >1.8.11
. - Improves tree shaking across the board for
@formkit/*
packages. - Fixes a bug in the many of the
alpha
,alphanumeric
, andcontains_*
validation rules for thelatin
charset.
v1.0.0 🎉 by
justin-schroeder
With this release we are officially declaring FormKit stable and production ready. Many community members have already been using FormKit in production for over a year now and have been very happy with the results. We hope you will be too!
Additionally FormKit Pro is now available to the general public (no early access required). FormKit Pro is still in Beta, and we are working hard to prepare it for a stable release.
💪 New features
- Adds a new
<FormKitSummary>
component that automatically lists all the errors and validation messages in a form with jump links to each (a11y).
🐛 Bug Fixes
- Improves focus styles for the
radio
,checkbox
, andrange
inputs (a11y). - Improves genesis contrast ratio to
4.5:1
(a11y). file
input now includes the file name in the remove file button (a11y).- The
file
input now re-focuses after removing a file (a11y).
Beta 15 by
andrew-boyd
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 ourgenesis
theme. Check out the full documentation here. - Enable floating labels for all
text
family (text
,email
,url
, etc) andtextarea
inputs with the new floating labels plugin in@formkit/addons
. Check out the full documentation here. - Adds new
Next
andPrevious
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 forsubmit
buttons in the Tailwind CSS Genesis theme.
📘 Articles
- New Article: Create a Multi-Step form in Vue in 5 Minutes
Beta 14 by
andrew-boyd
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 adefault
export of theFormKitVariants
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.
Beta 13 by
andrew-boyd
January 19, 2023
💪 New features
- Adds new
<FormKitMessages>
component which allows relocation of a form’s validation and error messages and the ability forgroup
andlist
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. egouter-class="my-class !formkit-outer"
addsmy-class
and removes the defaultformkit-outer
class. - Adds
Catalan (thanks @petergithubmgw).
- The
checkbox
andradio
inputs now have adata-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
, andtaglist
). #502 - Pro: Adds checked attribute to formkit-option (
dropdown
,autocomplete
,taglist
). #350 - Pro: Adds
max
prop fortaglist
andautocomplete
withmultiple
inputs. #501 - Pro: Adds
closeOnSelect
prop will keep thelistbox
expanded as selections are made (autocomplete
multiple andtaglist
). - Pro: Adds
forceExpanded
prop forces thelistbox
to remain open for dev purposes (dropdown
,autocomplete
, andtaglist
). - 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 asundefined
. #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 neednull
instead offalse
to render thedata-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 whenmultiple
prop set tofalse
. #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
andtaglist
could not be removed when the provided value was an object literal. #505 - Pro: Fixed an issue where the
listbox
was still visible when nooptions
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.
Beta 12 by
luan-nk-nguyen
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 thewalkTree
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.
v1.0.0-beta.11 by
luan-nk-nguyen
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
and3.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.
Beta 10 by
luan-nk-nguyen
July 29, 2022
🎉 New features
- Input definitions now have an optional
family
property, which adds adata-family
attribute, and sets the value onnode.props.family
. This is useful for applying plugins and styles to entire "families" of inputs like the text family of inputs, which would apply totext
,email
,password
,number
, etc. - Input definitions now include an optional
forceTypeProp
property which ensures thenode.props.type
is initialized as a given value even if the input is registered under a different name. For examplemyModifiedCheckbox
could still havenode.props.type
report "checkbox". - Adds
data-multiple
attribute to checkboxes and radios when they have multiple options. - Adds new
@submit-invalid
event totype="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).
Beta 9 by
luan-nk-nguyen
⚠️ Breaking changes
- The file input’s
removeFiles
section has been renamed tofileRemove
. - The
fileRemove
(previouslyremoveFiles
) section used to rendered an<a>
tag, this has been changed to abutton
. - 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 indefaultConfig()
- Adds new
submit
andsetErrors
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
andalpha_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.
Beta 8 by
justin-schroeder
⚠️ Breaking changes
- The
update:model-value
event will now only be emitted when using thev-model
directive. - The
input
event is now debounced to reduce the amount of noise being emitted. You can use the newinput-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, setpreserveErrors: true
in your global config object. - The
@formkit/tailwindcss
package is now deprecated — both theformKitTailwind
plugin and thegenerateClasses
function have been moved to the@formkit/themes
package.
🎉 New features
checkbox
,radio
, andselect
inputs (inputs that use:options
) can now use any data type as their value like numbers, objects, or evennull
(#85).- Adds new
node.clearErrors
andclearErrors
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) withpreserve-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 parentlist
type. - The
<FormKit>
component’sinput
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
andsubmit-raw
events. - Adds new core node event
dom-input-event
which has the native HTMLEvent
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 asformkit-invalid:
andformkit-disabled:
.@formkit/themes
now includes thegenerateClasses
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 specifyingdisabled="true"
(#215) - Fixes a schema compiler bug that caused the white space of a quoted string in a parenthesis to be incorrectly removed (#150).
Beta 4 by
justin-schroeder
⚠️ 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'ssubmitForm('form-id')
).
- Can be submitted by node
- Improved
setErrors
DX:- Can now be called directly on a node
node.setErrors(nodeErrors, childErrors)
. setErrors
now supports pure stringnode.setErrors('My error')
- Can now be called directly on a node
- 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 theouter
section when an input has failing validation messages that are currently displayed (playground example). - Adds
data-errors
attribute to theouter
section when the input has explicitly placed errors (via prop orsetErrors
). - Adds
data-complete
attribute to theouter
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.
- Either:
- 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 asdata-complete
.state.validationVisible
- true when thevalidation-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 customonChange
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)
v0.19.3 (Candidate 1) by
justin-schroeder
🐛 Bug Fixes
- Improves prop inheritance via the
config
object.
v0.19.2 (Candidate 1) by
justin-schroeder
💪 New features
- You can now log in to your FormKit Pro account and create teams and projects directly from the CLI.
- Exports
StepHandlers
andMultiStepHandlers
andBeforeStepChangeData
to assist typing multi-step inputs.
🐛 Bug Fixes
- Fixes an issue that caused
datetime-local
inputs to not resolve their slot typings. - Fixes a bug that caused nuxt installations to fail.
v0.19.0 (Candidate 1) by
justin-schroeder
💪 New features
- Introduces a new hidden input
meta
. Meta inputs are in-memory only and add data to your form without displaying it to the user or rendering anything on the page. Meta docs. - Adds a new
number
prop totext
,number
,range
, andhidden
inputs that casts the value to a number usingparseInt
orparseFloat
and expands or contracts the type definition of the value to match. - Dynamic lists now automatically change the rendered name of any child radio inputs to ensure they do not conflict with each other.
- 🇧🇦 Adds Bosnian (
bs
) locale.
🐛 Bug Fixes
- Fixes an issue that caused checkboxes and radios to use duplicate
id
attributes when used in a dynamic list (#908). - Checkboxes and Radios used
- Adds
stepIndex
andsteps
to thestep
input’s type definition. - Improves
nl
locale translations. - Adds optional
FocusEvent
to type definition ofcontext.handlers.blur
.
v0.18.5 (Beta 18) by
sashamilenkovic
v0.18.4 (Beta 18) by
sashamilenkovic
🐛 Bug Fixes
- Improves types for multi-step plugin and its slots.
v0.18.3 (Beta 18) by
sashamilenkovic
🐛 Bug Fixes
- Improves types for button and submit inputs (#895)
- Improves types for multi-step plugin
v0.18.2 (Beta 18) by
justin-schroeder
🐛 Bug fixes:
- Fixes a bug that caused the ledger to perform incorrect unmerge calculations for counters that were not the first in the set. This caused groups and lists to occasionally leave their counter values behind when unmounted (#878).
v0.18.1 (Beta 18) by
justin-schroeder
🐛 Bug Fixes
- Fixes a bug that caused forms with dynamic lists to throw errors when being reset (#731).
- Fixes a bug that caused schema data to render improperly in some edge cases when the schema was being updated dynamically (#610).
- Fixes the
autoHeightTextareaPlugin
and greatly improves it’s resizing accuracy (#888) - Fixes
tet
andlt
translations (#886)
Beta 18 by
andrew-boyd
0.18.0 (Beta 18)
August 11, 2023
🎉 Keynote features
- Enhanced TypeScript prop support for Vue 3.3+. #627
- New
barcode
input available via@formkit/barcode
package. Barcode docs
💪 New features
- Introduced
dropdown
input functionalities: - The
whenAvailable
utility from@formkit/utils
dynamically references its document context, facilitating FormKit's usage within web component shadow DOM. #837 - New behavioral properties for
dropdown
,autocomplete
, andtaglist
inputs. - Added an
#empty
section/slot for therepeater
input to display context when there are no values. Repeater docs - Adds Lithuanian 🇱🇹 (
lt
)
🐛 Bug fixes
- The
repeater
respects the disabled state of its parent form. #579 - The
taglist
accepts empty options. #586 - Prevented unnecessary calls to options method in dropdown family inputs. #657
- Ensured
autocomplete
input compatibility with Vue's@focus
directive. #670 - The
taglist
accepts values outside its options list. #681 - Resolved field reactivation after parent form reenabling. #733
- Addressed
datepicker
error on keyboard navigation inpicker-only
mode. #736 - Corrected checkbox label slot overwrite by adjacent radio. #778
- Genesis theme limits
pointer-events: none
to submit-type buttons in theactions
slot. #790 - "Compare" dirty checks adapt to new values provided during form reset. #791
- Ensured
taglist
respects the max prop withopen-on-click
enabled. #793 - Enhanced
autocomplete
withselectionAppearance
set tooption
to work withopen-on-click
prop. #817 - Fixed issues with the
eq
function from@formkit/utils
. #819 - Resolved
datepicker
navigation error when starting withyear
. #827 - Ensured
taglist
respects the max prop withclose-on-select
disabled. #838 - Addressed inline array-syntax validation prop exceptions. #852
- Fixed FormKit CLI export path issues. #854
- Resolved schema compiler issues with FormKit. #857
- The
formkit-icon
class aligns withconfig.rootClasses
. #859 - Remedied Transfer List drag-and-drop glitches. #863
- Addressed a
datepicker
Safari focus issue by modifying the open button to arole="button"
div. #864 - Dropdown inputs (
dropdown
,autocomplete
,taglist
) can now render values that are not part of their options list. #877
v0.17.5 (Beta 17) by
justin-schroeder
💪 New features
- Adds new
<FormKitRoot>
component. This component provides context about the root element (Document
orShadowRoot
). When using FormKit inside a Custom Element (Web Component) wrap one or many FormKit input’s in<FormKitRoot>
to ensure proper functionality. - Adds new
node.props.__root
andcontext.__root
property that references the node’s current root element (Document | ShadowRoot
).
🐛 Bug fixes
Beta 0.17.4 by
andrew-boyd
0.17.4 (Beta 17)
June 30, 2023
💪 New features
- Adds new
data-empty
attribute to inputouter
wrappers for styling purposes. #777 - Updates to Nuxt module allowing for
runtimeConfig
support — see the new docs in the installation wizard guide. #795
🐛 Bug fixes:
v0.17.3 by
andrew-boyd
💪 New features
- Adds 🇲🇳 Mongolian (mn) language - #747
- Adds 🇮🇸 Icelandic (is) language #748
- Adds new
node.next()
,node.previous()
, andnode.goTo()
extensions formulti-step
inputs via MultiStep plugin. This allows for easier external control ofmulti-step
input navigation. #685 - Adds new
node.restoreCache()
extension for the localStorage plugin to allow restoring of form values to cache on failed submit. #727
🐛 Bug fixes:
- Fixes SSR hydration issues for the
multi-step
input. #720 - Fixes issue where
blur
event could cause console errors on route change. #735 - Fixes issue where Pro inputs would break when used with the Floating Labels plugin. #742
- MultiStep
beforeStepChange
now works withasync
function calls. #743 - Fixes issue where
file
inputs would not allow re-uploading the same file after callingreset
. #762 - Prevents Genesis CSS keyframe naming conflict by adding
fk-
prefix.
v0.17.2 by
justin-schroeder
🐛 Bug fixes:
- Fixes an issue that caused deeply nested v-model’s to not update when a mutation originated at depth (#722)
- Fixes an issue that caused custom inputs that overrode the
text
family of inputs to re-use the first schema(#719) - Exports type
FormKitValidationMessage
to help type validation message functions (#695)
💪 New features
- localStorage plugin now supports new options:
key
,control
,debounce
,beforeSave
, andbeforeLoad
. - localStorage plugin can now be applied to any input of type
group
. eg (form
, group,
multi-step`, etc).
v0.17.1 by
justin-schroeder
Beta 17 by
justin-schroeder
💪 New features
- New FormKit Zod plugin — Validate your FormKit forms using Zod schema.
- New
dynamic
list prop allows you to easily create your own repeaters. - New Save to localStorage plugin for saving user progress in forms and protecting against lost data in the event of an unexpected event.
- Adds new validation rules:
require_one
(thanks @devoidofgenius),contains_alpha
,contains_alphanumeric
,contains_alpha_space
,contains_symbol
,contains_uppercase
,contains_lowercase
,contains_numeric
,symbol
,uppercase
, andlowercase
(thanks @riderx). - New Auto-height textarea plugin to create
textarea
inputs with dynamically resizing height. - Pro: New Slider input.
- Adds new
commitRaw
event that fires even if there is no change to the input value. FormKitSchema
can now use a single root node (instead of a fragment)- All FormKit inputs now use a root node instead of a fragment meaning standard Vue directives like
v-show
now work adding akey
to dynamic inputs is generally no longer required (#528). - The AutoAnimate plugin now supports animating the repeater input and other Pro inputs.
- Values passed into the
node.reset()
function become the new default value for the input (#621). - Adds traditional Chinese 🇨🇳 (
zh-TW
) - Adds Latvian 🇱🇻 (
lv
) - Adds Tetum 🇹🇱 (
tet
) - Adds new ability to extend a core node with
node.extend()
.
⚡️ Performance
- Dramatically improved the performance of mounting inputs in a large form (5-10x faster).
- Improved performance of hydrating a form by diffing scalar values before inputting.
- Reduced the noise on the
@input
event and removed the now unnecessary debounce on the change event.
🐛 Bugfixes
- The
@formkit/observer
will now observe changes tonode._value
in instances where you want to operate on the non-debounced input value. - The
range
icon in@formkit/icons
has been updated to only show one control handle since HTML range inputs do not support multiple values. The old multi-handle icon has been repurposed for the newslider
FormKit Pro input. - Pro: Fixes a bug that caused nested
repeater
inputs to not hydrate properly (#458). - Pro: Fixes a bug that caused nested
repeater
inputs to throw an error when being removed (#457). - Fixes a bug that caused the blur event to fire multiple times when manually binding to the
@blur
event on a custom input (#413). - Fixes a bug that caused
v-model
to only fire input events on every other input (#463) - Fixes a bug that caused the schema to iterate over the value of an array if the array had a length of 1 and the only value in the array was a number (#635)
- Fixes an issue that caused
node.walk()
to prematurely end when usingstopOnFalse
. - Fixes memory leak in SPA browsing and SSR environments (#475)