Nuxt Float Label

Examples of usage

Type something to try out

Default input label

<NuxtFloatLabel>
    <input type="text" placeholder="Name" />
</NuxtFloatLabel>

Using a different label from placeholder

<NuxtFloatLabel label="A more complex text">
    <input type="text" placeholder="Text" />
</NuxtFloatLabel>

Select input

<NuxtFloatLabel>
  <select>
    <option disabled selected>Do you enjoy coding?</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</NuxtFloatLabel>

Textarea input

<NuxtFloatLabel>
  <textarea type="text" placeholder="Description" />
</NuxtFloatLabel>

Set custom label class

<NuxtFloatLabel labelClass="text-purple-700">
    <input type="text" placeholder="Name" />
</NuxtFloatLabel>

Show float label on start by setting dispatch to true

<NuxtFloatLabel :dispatch="true">
  <input type="text" placeholder="Name" />
</NuxtFloatLabel>

Quick Setup

Add nuxt-float-label dependency to your project

# Using npm
npm i -D nuxt-float-label

Add nuxt-float-label to the modules section of nuxt.config.js

{
  modules: [
    'nuxt-float-label'
  ]
}

Props

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

Configs

To use on nuxt.config.ts

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

Example

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

Nuxt Float Label