@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'
}