Material Design Inspired Floaing Form Labels - Awesome Label

Awesome Label is a jQuery plugin for creating Material Design inspired animated floating form labels. Works with input & texarea fields. With floating inline labels, when the user engages with the text input field, the labels move to float above the field. Learn more.

See also:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
• Material Design Styled Text Fields with jQuery and CSS3
• Simple jQuery Plugin For Inplace Input Labels - LabelinPlace
• jQuery Animated Input Field Label Plugin - Label Better
• jQuery Floating Placeholder Text Plugin - Placeholder Label
• jQuery Plugin For Text Field Float Label - floatlabels.js

How to use it:

1. Load the jQuery Awesome Label after you have jQuery JavaScript library loaded.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="libs/awesomelabel.min.js"></script>

2. Create a text field with the data-label attribute specifying the label text.

<input type="text" class="awesomelabel-label" data-label="Enter your username..">
<input type="password" class="awesomelabel-label" data-label="Enter your password..">
<textarea class="awesomelabel-label" data-label="Enter your message section.."></textarea>

3. Call the plugin and done.

$(document).ready(function(){
  $('.awesome-label').awesomelabel();
});

4. Adjust the floating labels.

$('.awesomelabel').awesomelabel({
    margin: '20px',
    padding: '20px',
    width: '250px',
    height: '30px',
    float: 'left',
    ease: '0.2' // This means 2 milliseconds
});

5. Add your custom CSS styles to the floating labels.

.awesome-label {
  outline: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid cornflowerblue;
  color: gray;
}

.awesome-label:focus { border-color: lightgray; }

.awesome-label:focus ~ label { color: cornflowerblue; }

.awesome-label-input-group label {
  font-family: georgia;
  font-size: 14px;
  font-style: italic;
  color: #bbb;
}

---

This awesome jQuery plugin is developed by AmrSubZero. For more Advanced Usages, please check the demo page or visit the official website.