Floating Labels Plugin

• Installation
• Usage

Using the createFloatingLabelsPlugin function from @formkit/addons you can easily add a floating label treatment to any text family (text, email, url, date, etc) or textarea FormKit input.

Installation

To install the floating labels plugin we need to import it from @formkit/addons, add it our FormKit config, and include the supporting CSS styles (or provide your own).

The createFloatingLabelsPlugin has one option you can configure which controls whether the floating label treatment is the default treatment on applicable inputs.

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/addons/css/floatingLabels'

const config = defaultConfig({
  plugins: [
    createFloatingLabelsPlugin({
      useAsDefault: true, // defaults to false
    }),
  ],
})

export default config

Usage

By default the floating label plugin only takes effect on a FormKit input if you set the new floating-label prop to true.

If you would like to use floating labels by default then pass the useAsDefault option to the plugin when you install it.

// formkit.config.js
...
plugins: [
  createFloatingLabelsPlugin({
    useAsDefault: true
  }),
],
...

When floating labels are set as the default you can still disable them on a FormKit input by setting the floating-label prop to false.

That's It! Floating labels on your FormKit inputs in as little as 3 additional lines of code.