Nuxt Float Label

Nuxt Float Label

Developed by FMCX.

Downloads NPM


  • Apply float labels automatically to your inputs, selects and textareas
  • Works on Nuxt 3
  • Fully css customizable

Quick Setup

  1. Add nuxt-float-label dependency to your project

# Using npm
npm i -D nuxt-float-label
  1. Add nuxt-float-label to the modules section of nuxt.config.js

  modules: [

Access the demo website.


Name Type Description Required
label String Overrides placeholder No
label-class String Attribute a custom class to the label No
dispatch Boolean Shows float label on mount No


To use on nuxt.config.ts

Name Type Description
useCss Boolean Choose to use the default css or a custom one


nuxtFloatLabel: {
    useCss: false

Css classes

Name Description
fl-wrapper Wrapper class
fl-label Label class
fl-on-focus Label on focus and blur event
fl-on-input Label on input event


View Github