vue-float-label


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

!intro

``html



`

Installation

$3

Install package using yarn or npm:

`sh
$ yarn add vue-float-label

or

$ npm install --save vue-float-label
`

#### Global

Load the plugin by calling Vue.use():

`js
import Vue from 'vue'
import VueFloatLabel from 'vue-float-label'

Vue.use(VueFloatLabel)
`

Now you have access in your templates to the component.

#### Local

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

`vue



`

$3

Load the script file from CDN:

`html






`

Usage

Wrap input, textarea or select with :

`html










Framework
Vue
React
Angular
Ember


`

See more examples at Demo.vue.

Customization

$3

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

!example

`css
.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;
}
`

$3

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

`vue



`

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

`html



`

`vue



`

Set :fixed to true to make label permanently active:

`vue

`

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._

`vue



`

Development

1. Clone the repository:

`sh
$ git clone git@github.com:bkzl/vue-float-label.git
`

2. Install dependencies:

`sh
$ yarn install
`

3. Start development:

`sh
$ yarn start
``

*

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

I appreciate any comments, feedback, and information about potential issues. Have you experienced a bug or noticed a mistake in documentation? Please add a new issue. Thanks!