@formkit/addons

• Introduction
• Functions
  • createAutoAnimatePlugin()
  • createFloatingLabelsPlugin()
  • createMultiStepPlugin()
• TypeScript
  • FloatingLabelsOptions
  • MultiStepOptions

Introduction

Common, optional, first-party add on features for FormKit.

You can add this package by using npm install @formkit/addons or yarn add @formkit/addons.

Functions

createAutoAnimatePlugin()

Adds auto-animate to each input automatically:

Signature

createAutoAnimatePlugin(options?: AutoAnimateOptions): FormKitPlugin;

Parameters

• options — AutoAnimateOptions

Returns

FormKitPlugin

Examples

import { createApp } from 'vue'import App from 'App.vue'import { createAutoAnimatePlugin } from '@formkit/addons'import { plugin, defaultConfig } from '@formkit/vue'createApp(app).use(  plugin,  defaultPlugin({    plugins: [      createAutoAnimatePlugin({        // optional config      }),    ],  }))

createFloatingLabelsPlugin()

Creates a new floating label plugin.

Signature

createFloatingLabelsPlugin(FloatingLabelsOptions?: FloatingLabelsOptions): FormKitPlugin;

Parameters

• FloatingLabelsOptions — The options of FloatingLabelsOptions to pass to the plugin

Returns

A FormKitPlugin

createMultiStepPlugin()

Creates a new multi-step plugin.

Signature

createMultiStepPlugin(options?: MultiStepOptions): FormKitPlugin;

Parameters

• options — The options of MultiStepOptions to pass to the plugin

Returns

A FormKitPlugin

TypeScript

FloatingLabelsOptions

The options to be passed to createFloatingLabelsPlugin

interface FloatingLabelsOptions {  useAsDefault?: boolean}

MultiStepOptions

The options to be passed to createMultiStepPlugin

interface MultiStepOptions {  allowIncomplete?: boolean  hideProgressLabels?: boolean  tabStyle?: 'tab' | 'progress'}