jQuery Plugin To Create Material Design Text Inputs - Polymer Form

Polymer Form is a jQuery plugin helps you create Material Design inspired customizable floating labels for text fields with placeholders, as you seen in Polymers project.

See also:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
• Material Design Inspired Floaing Form Labels - Awesome Label
• 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 Polymer Form plugin's stylesheet in the head section.

<link href="build/jquery.polymer-form.min.css" rel="stylesheet">

2. Load the jQuery Polymer Form plugin's script after jQuery library, but before the closing body tag.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="build/jquery.polymer-form.min.js"></script>

3. Call the plugin on the existing input field and done.

$(".demo-form").polymerForm();

4. Full plugin options to customize the fancy text fields.

// Name of label 
label_default: "Name",

// Base color of bar
base_color: "#AAAAAA",

// Active color of bar
active_color: "#C4141A",

// Height of bar
bar_height: "2px",

// Color of label 
label_color: "#999999",

// Origin of bar animation (Default: "center"). 
// This property can accept "center", "left" and "right".
origin: "center",

// Margin top of input (Default: 20px).
margin_top: "20px",

// Margin bottom of input (Default: 50px).
margin_bottom: "50px",

// Has default values
has_default_value: false

5. You can also pass the options directly in the markup, by using properties as shown below:

• label-default="Name"
• base-color="#AAAAAA"
• active-color="#C4141A"
• bar-height="2px"
• label-color="#999999"
• origin="center"
• margin-top="20px"
• margin-bottom="50px"

<input type="text" label="BarColor" active-color='#3F51B5' class="demo-form">

Change log:

2016-01-06

• Add default value option

---

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