jQuery Plugin To Create Material Design Text Inputs - Polymer Form

File Size: 19.9 KB
Views Total: 6496
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.


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:


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