Floating Labels Plugin

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.


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.jsimport { 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


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

Load Live Example

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.

Load Live Example

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