Changelog

0.127.23

🐛 Bug fixes

Fixes issue transferlist deselection did not work properly with values of options that were pojos #1632.31

0.127.22

🐛 Bug fixes

Fixes issue where loadMoreInner slots was not typed for dropdown family inputs #1622.

0.127.21

🐛 Bug fixes

Fixes issue introducd in FormKit Pro v0.127.20 where the autocomlete's loading state would interfere with the search value itself.

0.127.20

🐛 Bug fixes

Fixes issue where autocomplete with multiple prop was not showing loading state correctly when using the option-loader #1352.

0.127.19

🐛 Bug fixes

Fixes issue where datepicker selected date was persisting even though the value was not actually selected (only focused) #1606.

0.127.18

🐛 Bug fixes

Fixes issue where FormKit Pro inputs' FormKitMessages component usage was not respected #1603.

0.127.17

🐛 Bug fixes

Fixes issue where FormKit Pro inputs' help section was missing an ID #1598.

0.127.16

🐛 Bug fixes

Fixes FormKit Pro issue where iternal blur event on unit and currency did not fire and aria-required attribute was missing on the autocomplete input #1586.

0.127.15

🐛 Bug fixes

Fixes togglebuttons typing issue where label was not typed in the slot data.

0.127.14

🐛 Bug fixes

Fixes FormKit Pro issue where prefix and suffix data attributes were not being assigned on the outer section #1577.

0.127.13

🐛 Bug fixes

Fixes datepicker issue where the aria-selected attribute on a year cell would be removed when changing active date via. year cell.

0.127.12

🐛 Bug fixes

Fixes datepicker issue where the selected month/year didn't receive aria-selected="true" #1537.

0.127.11

🐛 Bug fixes

Fixes togglebuttons issue where the disabled state was not responsive to that of its parent's state #1554.

0.127.10

🐛 Bug fixes

Fixes issue where when opening the dropdown family's listbox, the first option would be set as the active descendant, regardless of whether it was disabled or not #1566.
Fixes single-select autocomplete edge case where after deletion and reopening of the listbox, the options would not be properly reset.

0.127.9

🐛 Bug fixes

Fixes issue where enter keypress would not fire form submission for the currency and unit inputs #1563.

0.127.8

🐛 Bug fixes

Fixes issue where touchstart and touchmove events were not being marked as passive #1558.

0.127.7

🐛 Bug fixes

Fixes @formkit/pro issue where @formkit/utils was not included as a peer dependency #1549.

0.127.6

🐛 Bug fixes

Fixes datepicker issue in Safari where focus state would not be removed #1543, #1519.

0.127.5

🐛 Bug fixes

Fixes autocomplete typing issue #1520.

0.127.4

🐛 Bug fixes

Fixes issue that caused inputs to disable when using a report-only content security policy.

0.127.3

🐛 Bug fixes

Fixes togglebuttons typing issue #1513.

0.127.2

🐛 Bug fixes

Fixes unit and currency input issue #1315 formatting was not working correctly when min-decimals prop was set.

0.127.1

💪 New Features

Makes unit property optional in unit input to allow for unitless values.

0.126.16

🐛 Bug fixes

Fixes mask issue related to #1315 where autofill would work on the first time but not the second.

0.126.15

🐛 Bug fixes

Fixes mask issue where autofill on Chrome browser would not update the input's value #1315.
Fixes issue where the repeater would not render its controls and base height when the default slot was empty #1465.
Fixes issue where mask input type attribute was incorrect #1467.

0.126.14

🐛 Bug fixes

Fixes regression caused by performance update where date object was converted into tuple #1439.

0.126.13

🐛 Bug fixes

Fixes issue where querySelector in repeater drag and drop feature was used incorrectly #1417.

0.126.12

🐛 Bug fixes

Fixes issue where loadOnCreated prop would not verify optionsLoader before invoking #1434.

0.126.11

🐛 Bug fixes

Fixes build issue with FormKit Pro legacy genesis styles.

0.126.10

🐛 Bug fixes

Fixes issue where programatically setting the value of the autocomplete input with type multiple would trigger a focus state on the input itself #1400.

0.126.9

🐛 Bug fixes

Fixes tabfocus issue for datepicker and mask where tabbing into input field would always select the last enum. #999.

0.126.8

🐛 Bug fixes

Fixes currency issue where FormKit's DOM input event was not emitted #1366.

0.126.7

🐛 Bug fixes

Fixes datepicker issue where navigating outside of the current month would close the datepicker #1394.

0.126.6

🐛 Bug fixes

Fixes issue where in certain cases datepicker would set parent form as dirty with initial value #844.
Fixes issue where datepicker min-date prop was not reactive #976.

0.126.5

🏎 Performance

Performance improvement for datepicker input when hovering over day cells #1360.

0.126.4

🐛 Bug fixes

Fixes datepicker min-date and max-date display error issue #1101.
Fixes autocomplete of type multiple issue with tabindex of 1: #1382.

0.126.3

🐛 Bug fixes

Fixes datepicker "selected" date issue related to usage of max-date being set before current date #1355.

0.126.2

🐛 Bug fixes

Fixes datepicker hydration attribute mismatch #1152.

0.126.1

🐛 Bug fixes

Fixes transferlist issue where target options that had been loaded by option-loader could not be filtered properly.
Fixes transferlist issue where occasionally the active-descendant was not set during filtration.

0.126.0

💪 New features

Adds ability to search and filter target options of the transferlist input #1374.

🐛 Bug fixes

Fixes transferlist accessibility issue #1364.

0.125.9

🐛 Bug fixes

Fixes missing label slot in type definition of currency input.

0.125.8

🐛 Bug fixes

Checks that document contains popover element before attempting mutation on it to prevent possible unhandled exceptions with datepicker panel.

0.125.7

🐛 Bug fixes

Fixes issue where auto-animate plugin would conflict with drag and drop animations on repeater input.

0.125.6

🐛 Bug fixes

Fixes issue where schema sections in Pro inputs with existing meta keys were not being assigned programmatic meta values. This was preventing the eachSection helper function from being able access some sections — which in turn was preventing the AutoAnimate plugin from being able to be applied to repeater items. Whew... this one was a doozy. 😅

0.125.5

💪 New Features

The colorpicker input now has an alpha prop which allows users to disable the alpha channel in the color picker #1302

🐛 Bug fixes

Fixes issue where dropdown family inputs' listbox position would be incorrect when opened, inverted, and filtered while in popover mode. #1310
Fixes issue where dropdown family inputs could trigger a javascript error due to having id attributes that were valid yet incompatible with querySelector syntax. #1313
Fixes issue where linked inputs for the slider would not have reactive min and max properties. #1341

0.125.4

🐛 Bug fixes

Fixes issue where currency input when using either the max or min prop did not allow the use of decimal points #1344.

0.125.3

🐛 Bug fixes

Fixes issue where Slider number inputs were unable to accept decimal input. #1341

0.125.2

🐛 Bug fixes

Fixes issue where Slider input min and max values were not being applied reactively to associated inputs when show-inputs prop was enabled. #1341

0.125.1

🐛 Bug fixes

Fixes issues with dropdown family inputs introduced by 0.125.0 #1346 and #1345

0.125.0

🐛 Bug fixes

Fixes issue preventing tree shaking of FormKit Pro inputs.

0.124.2

🐛 Bug fixes

Removes type tel from currency input. Now uses attr inputmode instead.

0.124.1

🐛 Bug fixes

Fixes max recursion bug in currency input in Safari.

0.123.6

🐛 Bug fixes

Fixes dropdown family issue where hydration mismatch occurs when loading option with value of pojo that can't be reduced to a string as temporary label.

0.123.5

🐛 Bug fixes

Fixes dropdown family issue where the loading state of all selections would end at the same time, even if their await times were different because the values were pojos.
Fixes dropdown family issue where value of pojo would sometimes cause issues with setting the active descendant.
Fixes dropdown family where active selection via. keyhandlers on taglist tags was not working properly.
Prevents focus state of tag via. keydown if text input is present.

0.123.4

🐛 Bug fixes

Fixes issue where attempting to deselect a list item from the dropdown family inputs with a value of pojo was not working as expected.

0.123.3

🐛 Bug fixes

Fixes issue where filtering option groups were not being filtered down via search to individual listitem.

0.123.2

🐛 Bug fixes

Fixes issue #1335 where the options prop typings for dropdown family inputs were incorrect.

0.123.1

🐛 Bug fixes

Fixes issue with autocomplete and taglist inputs where cloning during search prevented lookup of values with pojos.

0.123.0

April 25, 2024

warning

The rating input has been rewritten to be based on a radio group to provide better accessibility. While the API remains the same, be sure to update your theme at themes.formkit.com.

💪 New Features

Adds option group support for dropdown, autocomplete, and taglist inputs.

0.122.21

🐛 Bug fixes

Fixes issue where dropdown family inputs were not showing selected listbox items of initial values of pojos.

0.122.20

🐛 Bug fixes

Fixes issue #1334 where the ul tag had the role="group"

0.122.19

🐛 Bug fixes

Fixes issue #1327 where the role checkbox was being erroneously used on the togglebuttons input.
Fixes issue #1326 where the role listitem was being erroneously used on the togglebuttons inputs' options.

0.122.18

🐛 Bug fixes

Fixes issue #1332 where async searching with dropdown family inputs would remove all options before rehydrating with new search results.
Fixes issue where taglist, when using options with values of pojos, could not be deleted via. backspace.
Fixes issue where autocomplete attribute on autocomplete and taglist inputs was being ignored.

0.122.17

💪 New Features

Makes optionsLoader function available as a prop for dropdown family inputs.

0.122.16

🐛 Bug fixes

Fixes issue #1308 where deselecting listitem via. click would not work if the option was selected with enter key.

0.122.15

🐛 Bug fixes

Fixes issue where transferlist could not press enter on "loadMore" (pagination) button with enter key.

0.122.14

🐛 Bug fixes

Fixes issue where dropdown family inputs would not correctly scroll when paginating asynchronously.

0.122.13

🐛 Bug fixes

Fixes issue where dropdown family inputs would not show active value (from cursor position), when listbox was first opened with asynchronous options.

0.122.11

🐛 Bug fixes

Fixes issue where transferlist was still draggable when initialized with max already reached.

0.122.10

🐛 Bug fixes

Fixes issue where transferlist max prop was not working #1250.

0.122.9

🐛 Bug fixes

Fixes issue where listbox would be hidden when re-opening a dropdown family input while using the popover API. #1259

0.122.8

🐛 Bug fixes

Fixes issue where input panels rendered with popover API could lose position when inside a scrollable ancestor that is not the document body.
Fixes issue where pressing enter key with a mask input focused would not submit form. 625
Fixes issue where mask would not fire DOM input event on user input. #1011

0.122.7

🐛 Bug fixes

Fixes issue where slider input emitted a commit event after the mounted hook (#1231).

0.122.6

🐛 Bug fixes

Fixes issue where colorpicker would not handle empty values correctly(#1215).

0.122.5

🐛 Bug fixes

Fixes issue with autocopmlete input where attempting to edit an existing value would jump the cursor to the end of the input field (#1051).

0.122.4

🐛 Bug fixes

Fixes issue where dropdown with behavior overscroll and multiple prop would scroll erratically on selection (#1023).

0.122.3

🐛 Bug fixes

Fixes issue with multi-select dropdown with tags where tabbing would become "stuck" on last tag (#1221).

0.122.2

Build

Bumps version constraint of FormKit Drag and Drop.

0.122.1

Build

Slight API change of drag-and-drop for new version bump.

0.122.0

💪 New Features

Adds (Tempo) as dependency to FormKit Pro.

0.121.10

🐛 Bug fixes

Fixes issue where dropdown family inputs would not scroll using down arrow key (#1203).

0.121.9

🐛 Bug fixes

Fixes issue where when focused on autocomplete's listbox button, the listbox itself was openable by any kind of keystroke. Now it is only openable by the enter key or spacebar (#1201).

0.121.8

🐛 Bug fixes

Fixes issue where aria-label was not dynamic based on whether or not the autocomplete was open or not. (#923).
Fixes issue where autocomplete listbox button is focusable but pressing the enter key or spacebar wouldn't open the listbox itself (#1201).

0.121.7

🐛 Bug fixes

Adds popover prop to type definitions.

0.121.6

🐛 Bug fixes

Fixes accessibility issue regarding autocomplete input (#923).
Adds aria-label to listboxButton and removeSelection sections of dropdown family inputs.

0.121.5

🐛 Bug fixes

Adds localiztion for ui value of removeSelection section title attribute for autocomplete and taglist inputs.

0.121.4

🐛 Bug fixes

Addresses accessibility concern involving the removeSelection section of the autocomplete input. (#1195).
Fixes issue where max prop of the dropown input would cause the input to become disabled (#1193).

0.121.3

🐛 Bug fixes

Fixes styling issues with repeater drag and drop for vanilla CSS Genesis users.

0.121.2

🐛 Bug fixes

Fixes issue where draggable attribute could not be used without assignment.

0.121.1

💪 New Features

Adds data-draggable attribute to outer section.

0.121.0

💪 New Features

Adds drag and drop functionality to the repeater.
Adds default animations to all drag and drop functionality.

🐛 Bug fixes

Fixes issue where dropdown family inputs did not work well when using validation and auto-animate (#1182).
Fixes issue where selecting a currently "selected" option from the listbox did not close the listbox (when close-on-select was set to true) (#1126).

0.120.0

💪 New Features

Adds a new optional popover prop to the autocomplete, colorpicker, datepicker, dropdown, and taglist inputs that renders their content panels using the new browser Popover API. As of this date the Popover API is not yet supported in Firefox (version 122) — but will be supported in version 125. You can check support here. To enable popover rendering simply add the popover prop to your FormKit component when using a supported input.
You can see a demo of the new popover functionality here: https://formkit.link/2d80abf698f38785f0be27ebce76aa20

0.119.13

🐛 Bug fixes

Fixes issue where dropdown family inputs would not render name attribute. (#1161).

0.119.12

🐛 Bug fixes

Fixes issue where dropdown family inputs with async options and pagination would scroll to top of listbox when clicking "load more" section. (#1149).

0.119.11

🐛 Bug fixes

Adjusts typings for FormKit repeater input.

0.119.10

🐛 Bug fixes

Adjusts typings for FormKit dropdown input.

0.119.9

Build

Bumps @formkit/drag-and-drop dependency to 0.0.7

0.119.7

🐛 Bug fixes

Fixes issue where transferlist would handle asynchronous options erroneously when paired with asynchronous option loader and wrapped in form with initial values.

0.119.6

🐛 Bug fixes

Fixes issue where TouchEvent was erroneously being referenced in Safari environment for Transferlist drag and drop (#1123).

0.119.5

🐛 Bug fixes

Fixes togglebuttons issue where active state would not show when option value was null (#975).

0.119.4

🐛 Bug fixes

Removes disabled attribute from repeater fieldset section.

0.119.3

🐛 Bug fixes

(@formkit/core v1.5.x): Fixes issue where children in repeater cannot be reenabled after disabling (#975).

0.119.2

🐛 Bug fixes

Fixes togglebuttons issue with null or undefined values (#975).

0.119.1

💪 New features

Adds prop deselect to dropdown input to prevent user from deselecting an item: (#1012).

0.119.0

💪 New features

Adds touch support for drag and drop of transferlist input.

0.118.0

🐛 Bug fixes

Fixes togglebuttons font sizing in Genesis CSS theme.

0.117.7

🐞 Bug Fixes

Colorpicker: Fixes issue where #00000 hex color value could result in undefined rgba prop value when initializing colorpicker

0.117.5

🐞 Bug Fixes

Slider: Prevents default step label of 0 from being hidden

0.117.4

🚀 Features

Slider: Adds new handleMaxInner and handleMinInner sections to input
Slider: Allows adding custom classes to marks and mark labels
Slider: Re-work scaling functions so that users do not need to calculate their own percentage values in reverse functions

🐞 Bug Fixes

Slider: Prevents undefined mark labels from rendering as “undefined”
Slider: Update single-value sliders on external input

0.117.3

🐛 Bug Fixes

Fixes issue where the dropdown input with initial value of null rendered the selection-removable close icon (if the selection-removable prop was used). (#971).

0.117.2

🐛 Bug Fixes

Adds non-linear capability for slider inputs that was missing in 0.117.0 release.

0.117.1

🐛 Bug Fixes

Fixes a bug that could cause duplicate options in the dropdown when using load-on-created prop (#975).

0.117.0

⚠️ Breaking changes

The datepicker now includes a "close" button when rendered on touch-only devices (@media (max-width: 431px) and (hover: none)). This is accounted for in the genesis theme, but if you are using a custom theme, you should update it to account for this change.

💪 New features

Adds non-linear capability to the slider input.
Improves mobile styling of the datepicker input.

🐛 Bug Fixes

Fixes a bug that could cause duplicate options in the dropdown (#975).
Fixes an issue that caused the datepicker to not display the correct date when set to undefined after having a valid date applied (#972).

0.116.0

💪 New features

Adds new colorpicker input — checkout the docs!

🐛 Bug Fixes

Resolves a bug with selection removable (#971)

0.115.10

🐛 Bug Fixes

Widens the @formkit/core dependency version constraint to include 1.1.0.

0.115.9

🐛 Bug Fixes

Fixes a bug on the datepicker that caused the picker to close automatically when opened with a mouse click on the date itself in picker-only mode. (#942).

0.115.2

🐛 Bug Fixes

Improves reactivity of options on autocomplete, dropdown and taglist inputs (#922).
Fixes accessibility issue on autocomplete input (#923).

0.115.1

⚠️ Breaking Changes

The multi-select autocomplete input now also has its removeSelection section adjacent to the selection slot instead of inside of it.

0.115.0

⚠️ Breaking Changes

The autocomplete and dropdown now have a new section called selectionWrapper that is used to wrap the selected option. This makes overriding the selection slot easier since you longer need to reimplement any functionality. However, this does mean there is one more dom element in the markup.
On the autocomplete input when in single select mode the removeSelection section is now adjacent to the selection slot instead of inside of it. This makes it easier to override the selection slot without having to reimplement the remove selection functionality.

💪 New Features

Dedicated FormKit Pro changelog for tracking changes separately from the open-source FormKit project. Updates to Pro will no longer be comingled with the standard FormKit changelog.
The datepicker input now includes a new clearable prop which adds a clear button next to the input when the input has a value.

🐛 Bug Fixes

Fixes click away logic on datepicker input (#645).
Improves typings on autocomplete, dropdown and taglist.
Fixes an issue that caused an error when referencing an option’s label in the option slot on the dropdown (#914)
Fixes an issue that caused the option in the option slot to not be reactive if changed after selection.

🐛 Bug Fixes

Now imports FormKitSchema automatically from @formkit/vue when autoImport is true in Nuxt (#1286)
Fixes a bug that caused falsey values to not reset properly (#1509)

🐛 Bug Fixes

Fixes compatibility with Vue 3.5.6 (#1501)
Indicates compatibility with new v4 nuxt (#1418)
Fixes casing for the type prop of datetime-local input (#1486)
Keeps placeholder for null or undefined as well (#1474)

💪 New features

New validation rules date_before_or_equal, date_after_or_equal, date_before_node, date_after_node

1.6.6

🐛 Bug fixes

Fixes a bug that caused cleanup issues in Vue 3.5+ (#1496).

1.6.5

🐛 Bug fixes

Fixes a bug that causes the data-invalid attribute to not be removed when conditionally removing validation rules (#1384).

1.6.4

🐛 Bug fixes

Fixes a bug with validation rule observers that caused rules with external dependencies to stop firing when placed in a certain sequence (#1371).
Fixes a bug that caused inputs with no validation rules to receive the data-invalid attribute on reset (regression in 1.6.3) (#1376)

1.6.3

💪 New Features

New clear on submit option for local storage
New context.state.passing property indicates whether or not a given input is passing all its validation rules.

🐛 Bug fixes

Fixes auto animate plugin for FormKit components (#1354).
On multi-step inputs beforeStepChange is no longer called when the step cannot be advanced (#1191).
Quickly typing into an input no longer causes an invalid state flicker (#1324).

1.6.2

🐛 Bug fixes

Widens unocss compatibility for the @formkit/themes package #1281.
Small German translation fix #1293.
Adds additional dependencies to the create-app cli command #1233.

1.6.1

💪 New features

Adds new experimental (not documented) configuration option mergeStrategy to allow syncing between two nodes of the same name inside the same parent.
Improves tree shaking of @formkit/inputs package.

🐛 Bug fixes

Fixes FormKit’s monorepo builds script on windows environments (#1270).
Floating label now works as a naked attribute.
Fixes a bug that could cause the floating label to interfere with Transition components.

1.6.0

💪 New features

Adds new composable useFormKitContext for access to a the context object of the parent FormKit component — or any other FormKit component in the tree. Optionally, you can provide an effect callback that is run when the context is available.
Adds new composable useFormKitContextById for access to the context object of any FormKit component with an explicit id. Optionally, you can provide an effect callback that is run when the context is available.
Adds new composable useFormKitNodeById for access to a the node object of any FormKit component with an explicit id. Optionally, you can provide an effect callback that is run when the node is available.
Adds intellisense autocomplete for the type prop of the FormKit component (#1241).
Adds new stopWatch function to the @formkit/core package that allows de-registering receipts from the watchRegistry function.
Adds type generic to getNode<T>() function.
New integration with @nuxt/tailwindcss that automatically includes the formkit.theme.ts file in the tailwind content.
Adds new currency and unit icons.
Adds new library prop to FormKit and FormKitMessages components that allows you to include additional components for the input schema, for example, when using sections-schema to modify the input (#1145) (#1137).
The value type of a FormKit component that is passed a FormKitTypeDefinition is now inferred from the FormKitTypeDefinition.

🐛 Bug fixes

Fixes bug in changeLocale that caused updated locale to not be used on new nodes (#1143).
Fixes tree shaking of the @formkit/icons package (#1184).
Adds FormKitIcon component to the autoImport feature of the Nuxt module (#1168).
Fixes types for BeforeStepChangeData (#1224).
Fixes types for the datetime-local input type (#1129).
Vue is now a peerDependency of @formkit/vue to reduce the incidents of multiple Vue instances in the same project (#1160).
Adds tabindex and role="button" to the icon wrappers when a click event is added to the icon (#1210).

Custom Input Types

The type argument of the FormKit component now requires a matching type in the FormKitInputProps type for TypeScript support. If you are using custom inputs and have not supplied a module augmentation for FormKitInputProps, you will need to update the FormKitInputProps type to include your types.

1.5.9

February 9, 2024

💪 New features

Adds ui.open to all i18n locales.

1.5.8

February 9, 2024

🧼 Housekeeping

Updates Vue to >= 3.4

1.5.7

February 6, 2024

💪 New features

Adds dragHandle icon to genesis icons.

1.5.6

February 6, 2024

💪 New features

Adds dragHandle icon.

1.5.5

February 3, 2024

🐛 Bug fixes

Fixes issue that prevented theme installation using npx formkit@latest theme command.

1.5.4

February 2, 2024

💪 New features

Floating Labels plugin now supports prefix content when calculating label position. (#878)
Updates the @formkit/cli package to allow generating of published themes locally in your projects. See the new documentation here. (#1170)

🐛 Bug fixes

Fixes issue where multi-step would not allow schema overrides of tabs or tab sections. (1110)

1.5.3

January 29, 2024

🐛 Bug fixes

Fixes a bug that caused some dynamic validation rules to stop working after the rules were updated (#1155)
Fixes a regression in 1.5.0 that caused some FormKit packages to not be tree shaken properly (#1139)
Fixes a bug that caused errors initially set with the prop to not always be displayed initially (#1153)

1.5.2

January 23, 2024

🐛 Bug fixes

Updates the FormKitKitchenSink component to ship new $options presets that can be used in the dynamically fetched schema examples for theme authors.

1.5.1

January 19, 2024

🐛 Bug fixes

Fixes a bug introduced in 1.5.0 that caused the context.value to not properly synced with the node.value inside of nested group structures (#1133).

1.5.0

January 16, 2024

FormKit 1.5.0 ships with a new development build of FormKit. In development FormKit now uses slightly different versions of its packages that include additional developer experience enhancements. This is similar to how Vue itself has "development" and "production" versions, and it allows FormKit to provide an improved developer experience such as improved HMR support and better error messages.

The groundwork is now laid for greatly improved developer experience in future releases. This release also includes dozens of bug fixes and improvements.

💪 New features

Adds a new API for adding props to inputs with default values, boolean props, and getters/setters. See the updated docs for more info.
createInput now supports a third argument, sectionsSchema which allows you to extend the default sections that come with createInput (#882).
Adds new context property didMount and node event mounted to recognize when the <FormKit> component is mounted to the DOM (#0b8753d).
Now node.children are observed by @formkit/observer, this allows validation rules to access node.children with reactivity.
Hot module replacement with Vite/Nuxt now preserve the form state when updating form code (#1068)
Adds new changeLocale composable that globally changes the locale of all forms with Options API, Composition API, and Nuxt autoimport (#1112)
Rules allow_non_alpha and allow_numeric.
The new FormKit cli now scaffolds new apps (npx formkit@latest create-app) to use themes.formkit.com’s theme system.
New development build of FormKit that includes additional developer experience enhancements.

🐛 Bug fixes

Fixes Vite TSDoc comment warnings - by Yue Yang (e47c9)
Fix windows create-app name for nuxt projects (1066)
Inputs that use options (select, checkbox, radio, autocomplete etc) now properly count their __mask value (#1046).
Fixes a bug that did now allow submitAttrs to disable submit input (#789).
Removes data-disabled on checkbox and radio inputs when false - (#1043).
Fixes autoAnimate when used on repeaters and other inputs with complex conditionals (#1016).
Significantly improves @formkit/nuxt’s experimental autoImport feature (1095, and others).
Autoheight textarea hydration in nuxt (#980).
Adds non-blocking messages in getValidationMessages (#849).
node.clearErrors() always removes errors local to that node (#941)
Reduces re-renders on destructured group values (#1068).
Removes warning on multi-step about default slot being called outside render function (#920).
Inputs inside a disabled repeater can be enabled per-input (#1043).
Improves typing for createInput() (#1105).
Removes data-complete on groups/lists (#1038).
Boolean props like disabled and preserve can now be used without explicitly setting them to true or false (#989).

warning

Vitest does not automatically use the same node parameters (conditions) that Vite does (see #4971). If you find your tests failing after you update, you can add the following to your vitest.config.js file:

export default defineConfig({
  resolver: {
    conditions: process.env.VITEST ? ['development'] : undefined
  },
  test: {
    // ...vitest config
  }
})

Vite hould be at ~1.2.x or higher to use this feature.

1.4.0

December 5, 2023

💪 New features

FormKit now supports themes for TailwindCSS! Customize the look and feel of your forms with a visual editor. See themes.formkit.com for more information.
Adds new <KitchenSink> component that renders a specimen of every FormKit input (helpful for styling).
Adds new state.required property to the context object (makes adding asterisks to required inputs easier).
Adds aria-required attribute to <input>, <select>, and <textarea> elements when they are required (#984).
Adds new force-show prop to the <FormKitSummary> component to force the summary to show even if there are no visible errors.
Adds new create-theme command for the formkit CLI tool to scaffold a new theme from @formkit/theme-starter.

🐛 Bug fixes

Fixes a bug that caused radio inputs inside repeaters to become coupled (#1044).
Fixed an issue that caused node.submit() to fail when inside a custom element’s shadow root (#1057).
Fixes a bug that caused pro inputs to not produce proper memokeys (#933).
Fixed a bug that caused attributes to not pass through <FormKitProvider> (and related providers) (#1013).
Moved the invalidDate message to the to the validation locale key (#953)
Improved the min and max validation message (en) to be the validation locale key (#953)
Fixed a bug that prevented the incomplete-message prop (on forms) from being reactive (#1047).

1.3.2

November 28, 2023

🐛 Bug fixes

Fixes togglebuttons text color in default Tailwind Genesis theme.

1.3.1

November 28, 2023

💪 New features

Adds Tailwind styles for togglebuttons input.

🐛 Bug fixes

Fixes Tailwind styles for alignment of prefix icon in button family of inputs.

1.3.0

October 9, 2023

💪 New features

Adds new plugins for counting available characters in an input based on the length rule.
Adds a <KitchenSink> component that renders all input specimen.
Adds a data-has-multiple attribute to file inputs on the outer section when they have multiple files.

🐛 Bug fixes

Fixes a bug with on the select input with option groups containing non-string values (#986).
Fixes an issue with nuxt autoImport in webpack (#983)
Fixes a bug that prevent deeply nested inputs from receiving the correct input value during a reset (#1025)
Fixes create-app command of the formkit cli tool when installing vite.
Fixes a bug that caused the @formkit/nuxt module with autoImport to not include the FormKit component (#995)

1.2.2

October 3, 2023

🐛 Bug Fixes

Fixes a bug with @formkit/nuxt in autoImport mode where the SSR context was not being reset after each request leading to hydration errors and broken UI on some pro inputs.

1.2.1

September 29, 2023

🐛 Bug Fixes

Improves dev mode support for @formkit/nuxt with the autoImport option enabled.

1.2.0

September 29, 2023

💪 New features

The select input now supports grouped options (<optgroup>) (#426).
The @formkit/nuxt package now includes an experimental autoImport option that only loads FormKit on the pages it is used rather than globally. This will remove FormKit from your entry file. We plan to eventually make this the default behavior and encourage everyone using the current nuxt module to try the new option.
Adds support for prefix-icon and suffix-icon to inputs created with createInput().
Significantly improves tree shaking of inputs and configuration options (with manual configuration).
Adds Tailwind support for new colorpicker input.
Adds new color icon.

📙 Documentation

New guide: Optimizing for Production

🐛 Bug Fixes

Zod plugin now iterates over issues not errors (#945)

1.1.0

September 20, 2023

💪 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, and contains_* validation rules for the latin charset.

1.0.0

September 1, 2023

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, and range 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).

0.19.3 (Release Candidate 1)

August 30, 2023

🐛 Bug Fixes

Improves prop inheritance via the config object.

0.19.2 (Release Candidate 1)

August 29, 2023

💪 New features

You can now log in to your FormKit Pro account and create teams and projects directly from the CLI.
Exports StepHandlers and MultiStepHandlers and BeforeStepChangeData 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.

0.19.1 (Release Candidate 1)

We don’t talk about Bruno.

0.19.0 (Release Candidate 1)

August 25, 2023

💪 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 to text, number, range, and hidden inputs that casts the value to a number using parseInt or parseFloat 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 and steps to the step input’s type definition.
Improves nl locale translations.
Adds optional FocusEvent to type definition of context.handlers.blur.

0.18.4 (Beta 18)

August 22, 2023

🐛 Bug Fixes

Improves types for multi-step plugin and its slots.

0.18.3 (Beta 18)

August 18, 2023

🐛 Bug Fixes

Improves types for button and submit inputs (#895).
Improves types for multi-step plugin

0.18.2 (Beta 18)

August 16, 2023

🐛 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).

0.18.1 (Beta 18)

August 15, 2023

🐛 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 and lt translations (#886)

0.18.0 (Beta 18)

August 11, 2023

🎉 Keynote features

Improved TypeScript Support 🎉

1 min

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:
- Support for removing the current selection. #646
- Multi-select capability. #647
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, and taglist inputs.
Added an #empty section/slot for the repeater 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 in picker-only mode. #736
Corrected checkbox label slot overwrite by adjacent radio. #778
Genesis theme limits pointer-events: none to submit-type buttons in the actions slot. #790
"Compare" dirty checks adapt to new values provided during form reset. #791
Ensured taglist respects the max prop with open-on-click enabled. #793
Enhanced autocomplete with selectionAppearance set to option to work with open-on-click prop. #817
Fixed issues with the eq function from @formkit/utils. #819
Resolved datepicker navigation error when starting with year. #827
Ensured taglist respects the max prop with close-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 with config.rootClasses. #859
Remedied Transfer List drag-and-drop glitches. #863
Addressed a datepicker Safari focus issue by modifying the open button to a role="button" div. #864
Dropdown inputs (dropdown, autocomplete, taglist) can now render values that are not part of their options list. #877

0.17.5 (Beta 17)

July 20, 2023

💪 New features

Adds new <FormKitRoot> component. This component provides context about the root element (Document or ShadowRoot). 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 and context.__root property that references the node’s current root element (Document | ShadowRoot).

🐛 Bug fixes

Fixes an issue where the mult-step input plugin would break when rendering steps in a v-for loop or conditionally rendering a step via schema. #823 #825
Textarea Auto-height plugin recalculates height when programmatically changing the value. #839
Fixes an issue in Zod plugin that prevents transforms from being applied. #833

0.17.4 (Beta 17)

June 30, 2023

💪 New features

Adds new data-empty attribute to input outer 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:

Actually really for real fixes issue where blur event could cause console errors on route change. #776
Fixes issue where null icon value would throw error. #780
Fixes missing semicolon in multistep.css. #783
Fixes use of :model-value prop not updating internal FormKit node values. #785

0.17.3 (Beta 17)

June 16, 2023

💪 New features

Adds 🇲🇳 Mongolian (mn) language - #747
Adds 🇮🇸 Icelandic (is) language #748
Adds new node.next(), node.previous(), and node.goTo() extensions for multi-step inputs via MultiStep plugin. This allows for easier external control of multi-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 with async function calls. #743
Fixes issue where file inputs would not allow re-uploading the same file after calling reset. #762
Prevents Genesis CSS keyframe naming conflict by adding fk- prefix.

0.17.2 (Beta 17)

May 17, 2023

🐛 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, and beforeLoad.
localStorage plugin can now be applied to any input of internal type group. eg (form, group, multi-step, etc).

0.17.1 (Beta 17)

May 16, 2023

🐛 Bug fixes

Fixed a bug that caused and error to be thrown when a dynamic list was initialized with identical initial scalar values (#715)
Fixed a bug that caused the value property of a slot to not be updated in some edge cases (#717).

0.17.0 (Beta 17)

May 12, 2023

💪 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, and lowercase (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 a key 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 to node._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 new slider 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 using stopOnFalse.
Fixes memory leak in SPA browsing and SSR environments (#475)

0.16.0 (Beta 16)

March 14, 2023

New version scheme

Beta 16 is the first version of FormKit that does not have a pre-release identifier. Beta 16 and all remaining beta versions will be released under the 0.x.x semantic version. The first stable release will be 1.0.0 and is targeted for later this year. This change in versioning should help with package manager dependency resolution as we complete our beta release cycles.

💪 New features

Pro: New Transfer List input! A great option for helping your users select information from a large set of data.
Pro: The floating labels plugin now supports FormKit Pro Inputs.
Pro: The mask input now supports multiple colors by providing an overlay option.
Adds a new dirty-behavior prop allows users to opt into a compare behavior which compares the current value of the input to the original value of the input. If the input is changed back to its original state the context.state.dirty flag will revert back to false.
Adds i18n translations for some new ui and validation rules.

🐛 Bugfixes

The options prop (used in select, radio, checkboxes and some pro inputs) can now differentiate between null and undefined values.
Fixes issues with the @formkit/nuxt module and syntax highlighting.
Fixes a bug that caused the dirty state of an unrelated input to get incorrectly set true when an object (like a group) was updated (#520).
The floating labels plugin now hides placeholders until focused (#574).
Fixes a bug that caused forms to not receive the submitted state like the form’s children on an unsuccessful form submission (#503).
The multi-step input now preserves step order when conditionally rendering steps (#613).
Fixes a tailwind styling bug for checkboxes and radios (#584).

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

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.

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.

Pro: New Taglist Pro Input now available!
Adds npx formkit@latest 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.

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.

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).

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.

The tailwindcss, unocss, and windicss plugins must now be imported from their own subpath of the @formkit/themes package. For example:

import formKitTailwindPlugin from '@formkit/themes/tailwindcss'

🐛 Bug fixes

Removes improper imports from windicss, tailwindcss and unocss.

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).

Adds new alpha_spaces validation rule (#83)
Adds 🇨🇿 Czech (thanks @dfridrich)
Adds Frisian (thanks @arjendejong12)

📙 Documentation

New configuration documentation that explains the relationship of node options, config, and props.

🐛 Bug fixes

Fixes a bug that caused radio inputs to loose reactivity when set via node.input() (#139)
Improves TypeScript annotation for @submit event (#130)
Fixed an issue that caused selects not to render if set to an empty array (#129)
Fixed an error that caused server side rendering errors on Nuxt 3 when running a built project (#113)
Fixed a bug that caused schema variable scoping to be lost when referencing iteration data inside the slot of a component (#91)

The data-loading attribute has been moved from the submit button of a form to the <form> tag itself.

🎉 New features

Adds new @formkit/tailwindcss plugin to easily create Tailwind themes for your FormKit forms. Check out the Create a Tailwind CSS theme guide for more details.
Adds a new programmatic reset function. This can be done on any input, group, form, or list and it will restore the value back to its initial state. It also resets the context.state object (like blurred and dirty).
Improves accessibility by adding aria-describedby and aria-live to all provided input types. aria-describedby now targets help text, validation messages, and error messages (labeling provided by <label> tags that use the for attribute).
Groups, lists and forms can now apply undefined values to their children. In other words, if a form is v-modeled and its value is set to an empty object {}, it will clear the entire form out.
Adds new context.state.settled property that signals when the input’s internal debounce cycle has ended and a value is finished being committed to the form.
Adds data-submitted attribute to inputs that have been submitted.
Adds new section key fileName (thanks @santi).
Adds new parent prop that accepts a core node for advanced use cases where inputs are decoupled from their form or data structure is desired.
Adds 🇱🇾 Arabic (thanks @Ahmedelforjani)
Adds 🇩🇰 Danish (thanks @bjerggaard)
Adds 🇮🇩 Indonesian (thanks @rama-adi)
Adds 🇮🇹 Italian (thanks @punga78, @Archetipo95)
Adds 🇵🇱 Polish (thanks @xxSkyy)
Adds 🇰🇷 Korean (thanks @bwp618)
Adds 🇻🇳 Vietnamese (thanks @oanhnn)
Improved 🇫🇷 French (thanks @pop123123123)

🐛 Bug fixes

Fixes a bug that could cause validation errors to flash for 20ms before resolving when using browser autocomplete (#99).
Fixes a bug that caused class props (like input-class) inside schemas to not properly respect the $reset command because it was treated like a variable (#61).
Fixes a bug that didn't allow classes to be modified via section-key class props when the section-key has multiple words, such as file-list-class or file-item-class (#120).

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 caused 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 caused select list 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)

1.0.0-beta.3

February 22, 2022

beta.3 was going to be such a great release we decided to skip it and go straight to beta.4 👀 ! Only kidding. We had issues with npm and had to bump 🤦.

New @formkit/nuxt package is a full featured Nuxt 3 module that makes using FormKit with Nuxt 3 as simple as possible!
defaultConfig now includes a new package @formkit/dev which decodes FormKit’s error codes to helpful console messages (no action required) (#56).
FormKit is officially open-source under the MIT license!
The preserve key now applies to all descendants (#53).
Exports all the text formatter functions in the @formkit/i18n package (#54).
Adds 🇳🇱 Dutch language support (thanks @arjendejong12).
Adds 🇭🇷 Croatian language support (thanks @antemarkic).
Improves 🇩🇪 German language support (thanks @tosling).

📙 Documentation

New installation documentation. You no longer need an auth token to install from the @formkit organization!
Nuxt installation documentation
Improved internationalization documentation for selective message overrides.

🐛 Bug fixes

Fixes a bug that caused multi-select checkboxes to not display the current value when set from parent node and when using options prop that is stored in an external variable (#55)
Fixed a bug that caused the placeholder on select inputs to be removed if something caused the input to re-render (#52).
Fixed the select placeholder color (#51)

Forms are automatically disabled when an async submit handler is pending (#44).
Added a new prop submit-behavior to opt-out of the new automatically disabled forms.
Exports the Vue to FormKit bindings plugin as bindings in the @formkit/vue package.
The type button and submit are automatically ignored.
Introduces a new messages key to the defaultConfig to allow partial overrides to locales. This allows selective message overrides for already registered locales (#42).
The schema compiler now supports "undefined" as a valid output (in other words $: undefined would output the value undefined instead of the string "undefined").
Adds 🇮🇱 Hebrew locale (thanks @Hepi420)
Adds 🇨🇳 Chinese locale (thanks @myleslee)

🐛 Bug fixes

Fixed an issue that caused checkboxes with options to not properly hydrate when re-populated from a group, list, or form (#45).
Fixed an issue that caused checkboxes with options to not display incorrectly when missing a the label prop (#41).
Significantly improved TypeScript support for “synthetic” props (#43).

Changes the validation-behavior prop on the <FormKit> component to validation-visibility.
Changes the schema prop on the <FormKit> component to sections-schema.

🎉 New features

Adds the native file input type with support for some value-added features:
- Display only re-population.
- Drag and drop.
- Input clearing.
Adds the createInput helper function to make custom inputs easy to write.
New incomplete-message prop allows inline customization (or disabling) of the message displayed by a form when it attempts to submit and all its inputs are not valid.
Updates the defaultConfig to accept custom inputs.
Adds a prefix section key which allows content to be injected immediately before an input element.
Adds a suffix section key which allows content to be injected immediately after an input element.
🇷🇺 Russian locale (thank you @andreimakushkin!)
Refactors Genesis theme to use much more robust CSS variable structure.
Adds a new feature to schemas that allows users to prefix props and attrs properties with __raw__ to pass the raw value instead of its parsed result (#36).

📙 Documentation

New create a custom input guide.
New advanced custom input documentation page.
"Composition keys" will now be referred to as "Section keys".
Adds documentation on plugin.library — the mechanism plugins use to define new input types.
Interactive code editor for examples now supports multiple files.
In the FormKit Playground you can add new files and import them into each other. The FormKit Playground supports .vue, .js, formkit.config.js and tailwind.config.js files.
The FormKit Playground is now located at https://formkit.com/playground and old https://formkit.com/playground/vue playgrounds are deprecated.

🐛 Bug fixes

Fixes a bug that prevented the incomplete message from displaying on forms (#29).
Fixes TypeScript typings for @submit and @submit-raw events.
Fixes the order of numbers in the length and between validation messages to always place the lower number first (#35).
Fixes an issue (#32)with select lists where the :options prop would not accept number values.

New validation rule “hints” — modifiers that change a validation rule’s behavior. Supported hints allow you to:
- Run a rule when the field is empty.
- Force a rule to run even when previous rules are failing.
- Debounce a validation rule.
- Make a validation rule optional.
When an input is inside a form and unmounted (such as a v-if), it now removes it’s value from the form data and de-registers its core node.
New preserve prop allows inputs to not remove their data from groups, lists, and forms when they are removed.

🐛 Bug fixes

Fixed an issue that caused numeric value radio and checkbox options to render incorrectly.
Fixed a bug that caused the placeholder to not render when the prop came after the options prop.
Fixed a bug that caused the delay value to not be respected when set using ancestor config.

Form error handling is here. You can now set input errors on an entire form, group or list with the input-errors prop or the $formkit.setErrors() methods. Read more about it on the form docs.
New $formkit.setLocale() reactively changes the language of all displayed messages.
Adds 🇫🇷 French and 🇩🇪 German locales (thank you @HoreKk and @digitalkaoz)
Adds new rootConfig proxy object that is used to store global base config and prop values (significant refactor of configuration system).
Added ledger dependency tracking to instances of FormKitObservedNode.
The submit button on forms now use the locale for the default “Submit” label.
New child node event emitted when a parent has a child added to it.
The length rule can now take max/min arguments in either order length:15,5 or length:5,15 evaluate the same.
Adds a new getNode function to directly access a FormKit node using the composition API.
Improves the @formkit/theme css import location.

🐛 Bug Fixes

Fixed a bug that caused children of list inputs to sometimes throw an exception when display validation errors.
Improved several of the validation error messages.
Fixed an issue with select inputs prevented raw node.input() calls to not trigger reactivity in Vue.

A new $formkit schema shorthand for using FormKit inputs in a schema (Issue #15).
New disabled prop on form, list, and group inputs automatically disables all child inputs (Issue #16).
New submitAttrs prop on forms allows you to pass attributes to the form’s submit button.
Added a new universal ignore prop that prevents an input’s data from being used in a form.

🐛 Bug fixes

Fixed an issue that prevented schemas from rendering expressions when used inside the children property of a FormKit component. (Issue #21).
Added a check in case a rootClasses function incorrectly returns undefined (Issue #17).
Fixed a bug that caused a form's submit button to pollute the form’s data object with a submit_x property (Issue #22).
Fixed a bug that caused $cmp schema nodes to fail to remount if the schema’s root object was reset causing a full re-parse (Issue #14).

Docs

Getting Started

Essentials

Inputs

Plugins

Guides

API Reference

Tools

About

Sponsors

Getting Started

Essentials

Inputs

Plugins

Guides

Changelog