Have you ever seen those fancy floating label treatments on form inputs? They look something like this:

Wouldn't it be great if you could do that in your Vue projects in just a few lines of code?

Well — you can!

Setting up floating labels in your Vue Project

In order to quickly set up floating labels in our Vue project we'll be reaching for @formkit/vue, it's default theme from @formkit/themes and its floating label plugin from the @formkit/addons package — it's all free and open-source.

npm install @formkit/vue @formkit/themes @formkit/addons

Then in our Vue project, we'll install the supporting FormKit package and its floating label plugin.

// main.js
import { createApp } from 'vue'
import App from 'App.vue'
// FormKit imports
import { plugin as formKitPlugin, defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/themes/genesis'
import '@formkit/addons/css/floatingLabels'

createApp(App)
  .use(formKitPlugin, defaultConfig({
    plugins: [createFloatingLabelsPlugin({
      // set to true to have floating labels be the default.
      // otherwise, use the `:floating-label` prop
      useAsDefault: true
    })]
  }))
  .mount('#app')

That's it! Now when we create a <FormKit /> input in the text family (things like text, textarea, number, url, date, etc) we will automatically have floating labels!

You can see it action and try it for yourself on the interactive FormKit playground:

https://formkit.link/9d2b7db47b0ed4eb1f6f49e545779101

Learn more about FormKit

FormKit is a free and open-source form framework for Vue.js.

Want to learn about FormKit and how it can help with form structure, validation, accessibility, and more?

• Check out the floating label plugin docs at https://formkit.com/plugins/floating-labels
• Join the FormKit Discord community for support, chat with the maintainers, and meet others using FormKit in their own projects: https://discord.gg/2q3UZkUQbR