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
Top comments (0)