vue-float-label

Float label pattern for Vue.js. Cross-browser compatible and easy to customize with CSS.

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

Installation

yarn / npm

Install package using yarn or npm:

$ yarn add vue-float-label

# or

$ npm install --save vue-float-label

Global

Load the plugin by calling Vue.use():

import Vue from "vue";
import VueFloatLabel from "vue-float-label";

Vue.use(VueFloatLabel);

Now you have access in your templates to the <float-label> component.

Local

You may prefer to explicitly import the plugin and use it inside your components:

<template>
  <float-label>
    ...
  </float-label>
</template>

<script>
import FloatLabel from "vue-float-label/components/FloatLabel";

export default {
  components: {
    FloatLabel
  }
};
</script>

CDN

Load the script file from CDN:

<div id="root"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<script src="//unpkg.com/vue-float-label"></script>
<script>
  new Vue({
    el: '#root',
    template: '<float-label>...</float-label>'
  })
</script>

Usage

Wrap input, textarea or select with <float-label>:

<float-label>
  <input type="email" placeholder="E-mail">
</float-label>

<float-label>
  <textarea placeholder="Comment"></textarea>
</float-label>

<float-label :dispatch="false">
  <select>
    <option disabled selected>Framework</option>
    <option>Vue</option>
    <option>React</option>
    <option>Angular</option>
    <option>Ember</option>
  </select>
</float-label>

See more examples at Demo.vue.

Customization

Design

Style .vfl-label, .vfl-label-on-input and .vfl-label-on-focus to meet your design requirements:

.vfl-label {
  text-transform: uppercase;
}

.vfl-label-on-input {
  top: -1em;
}

.vfl-label-on-focus {
  color: #ff851b;
}

.vfl-label + input {
  padding-left: 0;
  font-size: 100%;
  border: 0;
  border-bottom: 2px solid #aaa;
  transition: border 0.2s;
}

.vfl-label-on-focus + input {
  border-bottom: 2px solid #ff851b;
}

Props

Set :on prop to add an additional condition for label activation:

<template>
  <float-label :on="isActive">
    <input type="text" placeholder="Inactive">
  </float-label>
</template>

<script>
export default {
  computed: {
    isActive() {
      return false;
    }
  },
  components: {
    FloatLabel
  }
};
</script>

Set :label prop to override placeholder attribute for input/textarea or option[disabled][selected] for select:

<float-label label="Last name">
  <input type="text" placeholder="Surname">
</float-label>

<template>
  <float-label label="Version">
    <select v-model="version">
      <option v-for="option in options" :value="option.value">
        {{ option.text }}
      </option>
    </select>
  </float-label>
</template>

<script>
export default {
  data() {
    return {
      version: "beta",
      options: [
        { value: "alpha", text: "Alpha" },
        { value: "beta", text: "Beta" },
        { value: "stable", text: "Stable" }
      ]
    };
  },
  components: {
    FloatLabel
  }
};
</script>

Set :fixed to true to make label permanently active:

<template>
  <float-label fixed>
    <input type="text" placeholder="Fixed">
  </float-label>
</template>

Set :dispatch to false to disable triggering input event once the component is mounted:

By default it's set to true to activate label when form element has value.

<template>
  <float-label :dispatch="false">
    <input type="email" placeholder="Email" v-model="email">
  </float-label>
</template>

<script>
export default {
  data() {
    return {
      email: "[email protected]"
    };
  },
  components: {
    FloatLabel
  }
};
</script>

Development

1. Clone the repository:

   $ git clone [email protected]:bkzl/vue-float-label.git
   

2. Install dependencies:

   $ yarn install
   

3. Start development:

   $ yarn start
   

Code is open sourced on GitHub. Up to date changelog is available under the releases section.