Polimer Paper Input

Polimer Paper Input is a Polymer element that provides a material design text input with floating label and other features. This element is part of the Polimer Paper element set, which consists of a collection of Material Design-inspired UI components built using web components and Polymer.

Features

• Floating label
• Error message display
• Clear button
• Character counter
• Disabled/enabled state
• Custom icon
• Custom validation
• Auto-validate

Usage

First, import the Polymer element:

<link rel="import" href="../bower_components/paper-input/paper-input.html">

Then, use the element in your HTML:

<paper-input label="Username"></paper-input>

Properties

• label: The input label text.
• value: The input value.
• disabled: Disables the input when true.
• invalid: Marks the input as invalid when true.
• charCounter: Displays a character counter below the input when true.
• charCounterLength: The maximum number of characters allowed for the input.
• customIcon: Custom icon that appears after the input.
• customValidation: Custom validation function that checks the input value.
• autoValidate: Validates the input automatically when true.

Example

<paper-input label="Username" value="{{username}}"
             char-counter char-counter-length="20"
             required auto-validate error-message="Username is required"></paper-input>

This example creates an input with the label "Username", with a maximum character count of 20 and is required. It also enables auto validation, and displays an error message when the input is invalid.

Conclusion

Polimer Paper Input element provides a lot of features to create material design input fields easily. It is easy to use and customize, and it is a great addition to any Polymer project.