Material design text fields


Keywords
web-components, polymer, input
License
BSD-3-Clause
Install
npm install @polymer/paper-text-field@3.0.0-pre.6

Documentation

Build status

Demo and API docs

##<paper-text-field>

Material design: Text fields

<paper-text-field> is a single-line text field with Material Design styling. Unlike <paper-input> it does not contain a native <input> field, so it cannot be used in native forms, or with any of the native <input> type=... attributes.

<paper-text-field label="Input label"></paper-text-field>

See Polymer.PaperTextFieldBehavior for more API docs.

Styling

The following custom properties are available for styling:

Custom property Description Default
--paper-text-field-color Label and underline color when the focus is not focused --secondary-text-color
--paper-text-field-focus-color Label and underline color when the input is focused --primary-color
--paper-text-field-input-color Input foreground text color --primary-text-color
--paper-text-field-disabled-opacity Opacity of the element when disabled 0.33
--paper-text-field-disabled-underline Border style of the underline when disabled 1px dashed

##<paper-password-field>

Material design: Text fields

<paper-text-field> is a single-line text field with Material Design styling. Unlike <paper-input> it does not contain a native <input> field, so it cannot be used in native forms, or with any of the native <input> type=... attributes.

<paper-text-field label="Input label"></paper-text-field>

See Polymer.PaperTextFieldBehavior for more API docs.

Styling

The following custom properties are available for styling:

Custom property Description Default
--paper-text-field-color Label and underline color when the focus is not focused --secondary-text-color
--paper-text-field-focus-color Label and underline color when the input is focused --primary-color
--paper-text-field-input-color Input foreground text color --primary-text-color
--paper-text-field-disabled-opacity Opacity of the element when disabled 0.33
--paper-text-field-disabled-underline Border style of the underline when disabled 1px dashed

##Polymer.PaperTextFieldBehavior

Use Polymer.PaperTextFieldBehavior to implement a paper-text-field like input, that controls a floating UI label.