```
See more examples at [Demo.vue](https://github.com/bkzl/vue-float-label/blob/master/demo/Demo.vue).
## Customization
### Design
Style `.vfl-label`, `.vfl-label-on-input` and `.vfl-label-on-focus`
to meet your design requirements:

```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;
}
```
### Props
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](https://github.com/bkzl/vue-float-label). Up to date changelog is available under [the releases section](https://github.com/bkzl/vue-float-label/releases).
vue-float-label
Float label pattern for Vue.js. Cross-browser compatible and easy to customize with CSS.
<float-label>
<inputtype="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():
importVue from "vue";
importVueFloatLabel 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>
importFloatLabel from "vue-float-label/components/FloatLabel";