DEV Community

Cover image for Effortless Floating Labels for Inputs in Vue.js
Andrew Boyd
Andrew Boyd

Posted on

Effortless Floating Labels for Inputs in Vue.js

#webdev #vue #javascript #tutorial

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

FormKit floating label

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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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

FormKit floating labels across input types

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?

Top comments (0)