
formkit
Go to documentationSeamless FormKit integration for Nuxt
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)