Vue 3 Float Label

Float Label like package for Vue 3. Written in Composition API and easily customizable with CSS.

<float-label>
  <input type="text" placeholder="Label">
</float-label>

Installation

Install the package via npm:

$ npm install vue3-float-label

Usage

To use the component locally within a single component:

<template>
  <FloatLabel label="Your Name">
    <input type="text" placeholder="Enter your name" />
  </FloatLabel>
</template>

<script setup>
import { FloatLabel } from 'vue3-float-label';
import 'vue3-float-label/dist/style.css'; // Import the stylesheet
</script>

Props

label

String - If you want a different label than the placeholder text. You can also pass it dynamic text based on another value (i.e. 'Start time on ' + beginningDate )

Example:

<float-label :label="'Your Name'">
    <input type="text" placeholder="Enter your name">
</float-label>

float

Boolean - Use this to manually control when the label is floated. This disables all other detection and on-focus prop.

<float-label :float="name ? true : false">
    <input v-model="name" type="text" placeholder="Enter your name">
</float-label>

on-focus

Boolean - Optional behavior that triggers the float when the field is in focus instead of when content is typed

Customizing Styles

The vue3-float-label component uses CSS variables to allow easy customization of its appearance. You can either copy the styles and modify them yourself, or there are some variables you can override. Below are the default CSS variables defined in the component that you can override in your stylesheet:

:root {
    --vfl-padding-y: 17px;
    --vfl-padding-x: 16px;
    --vfl-label-color: #6c6c6c;
    --border-color: lightgray;
    --border-width: 1px;
}

License

This project is licensed under the MIT License.