Changelog

Preserve order of duplicate values in synced lists - by @justin-schroeder in https://github.com/formkit/formkit/issues/1466 (20167)
addons:
- Merge floating label extensions instead of overwriting - by @andrew-boyd (f1d40)
nuxt:
- Resolves #1660 - by @justin-schroeder in https://github.com/formkit/formkit/issues/1660 (77edd)
vue:
- Allow $cmp children to access parent scope data - by @justin-schroeder (56f5f)
- Capture scope at createSlots time for $cmp children - by @justin-schroeder (d9f0f)

1.7.1

🐛 Bug Fixes

Shows scrollbars when maxAutoHeight has a limit on auto-height textareas
Slot scope data now properly shadows outer iteration data with the same variable name in FormKitSchema
Adds explicit FormKitLibrary type to inputs export for better TypeScript support
Fixes Nuxt module issue (#1690)

1.7.0

💪 New features

New Tailwind CSS 4 support — themes now ship with TW4 by default, with TW3 variants available via regenesis-tw3 and starter-tw3 theme names
CLI now defaults to Tailwind v4 for both Vite and Nuxt project creation with automatic version detection
New minAutoHeight prop for auto-height textareas that respects CSS minimum height (#1595)
New Bengali (bn) locale for internationalization
Added summaryHeader to all i18n locales for customizing form summary headers

🐛 Bug Fixes

Fixes memory leak by cleaning up __FORMKIT_CONFIGS__ on unmount
Allows passing unix epoch timestamps in date_between validation rule (#1587)
Fixes validation state becoming invalid when rules are dynamically removed (#1384)
Fixes validation dependency tracking issue (#1371)
Removes peer dependencies from @formkit/themes to avoid version conflicts
Fixes Dutch localization terms for next/previous (#1608)
Fixes typo in Spanish translation (#1609)
Fixes numeric comparison in validation using Math.min/max (#1620)
Fixes IIFE build output order (#1674)

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

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

Improves prop inheritance via the config object.

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.

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.

Improves types for multi-step plugin and its slots.

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

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

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)

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

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

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