<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../iron-form-element-behavior/iron-form-element-behavior.html”> <link rel=“import” href=“../iron-input/iron-input.html”> <link rel=“import” href=“paper-input-behavior.html”> <link rel=“import” href=“paper-input-char-counter.html”> <link rel=“import” href=“paper-input-container.html”> <link rel=“import” href=“paper-input-error.html”>

<!– Material design: [Text fields](www.google.com/design/spec/components/text-fields.html)

`<paper-input>` is a single-line text field with Material Design styling.

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

It may include an optional error message or character counter.

<paper-input error-message="Invalid input!" label="Input label"></paper-input>
<paper-input char-counter label="Input label"></paper-input>

It can also include custom prefix or suffix elements, which are displayed before or after the text input itself. In order for an element to be considered as a prefix, it must have the `prefix` attribute (and similarly for `suffix`).

<paper-input label="total">
  <div prefix>$</div>
  <paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>

A `paper-input` can use the native `type=search` or `type=file` features. However, since we can't control the native styling of the input (search icon, file button, date placeholder, etc.), in these cases the label will be automatically floated. The `placeholder` attribute can still be used for additional informational text.

<paper-input label="search!" type="search"
    placeholder="search for cats" autosave="test" results="5">
</paper-input>

See `Polymer.PaperInputBehavior` for more API docs.

### Focus

To focus a paper-input, you can call the native `focus()` method as long as the paper input has a tab index.

### Styling

See `Polymer.PaperInputContainer` for a list of custom properties used to style this element.

@group Paper Elements @element paper-input @hero hero.svg @demo demo/index.html –>

<dom-module id=“paper-input”>

<template>
  <style>
    :host {
      display: block;
    }

    :host([focused]) {
      outline: none;
    }

    :host([hidden]) {
      display: none !important;
    }

    input::-webkit-input-placeholder {
      color: var(--paper-input-container-color, --secondary-text-color);
    }

    input:-moz-placeholder {
      color: var(--paper-input-container-color, --secondary-text-color);
    }

    input::-moz-placeholder {
      color: var(--paper-input-container-color, --secondary-text-color);
    }

    input:-ms-input-placeholder {
      color: var(--paper-input-container-color, --secondary-text-color);
    }

    label {
      pointer-events: none;
    }
  </style>

  <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">

    <content select="[prefix]"></content>

    <label hidden$="[[!label]]" aria-hidden="true" for="input">[[label]]</label>

    <input is="iron-input" id="input"
      aria-labelledby$="[[_ariaLabelledBy]]"
      aria-describedby$="[[_ariaDescribedBy]]"
      disabled$="[[disabled]]"
      title$="[[title]]"
      bind-value="{{value}}"
      invalid="{{invalid}}"
      prevent-invalid-input="[[preventInvalidInput]]"
      allowed-pattern="[[allowedPattern]]"
      validator="[[validator]]"
      type$="[[type]]"
      pattern$="[[pattern]]"
      required$="[[required]]"
      autocomplete$="[[autocomplete]]"
      autofocus$="[[autofocus]]"
      inputmode$="[[inputmode]]"
      minlength$="[[minlength]]"
      maxlength$="[[maxlength]]"
      min$="[[min]]"
      max$="[[max]]"
      step$="[[step]]"
      name$="[[name]]"
      placeholder$="[[placeholder]]"
      readonly$="[[readonly]]"
      list$="[[list]]"
      size$="[[size]]"
      autocapitalize$="[[autocapitalize]]"
      autocorrect$="[[autocorrect]]"
      on-change="_onChange"
      tabindex$="[[tabindex]]"
      autosave$="[[autosave]]"
      results$="[[results]]"
      accept$="[[accept]]"
      multiple$="[[multiple]]">

    <content select="[suffix]"></content>

    <template is="dom-if" if="[[errorMessage]]">
      <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
    </template>

    <template is="dom-if" if="[[charCounter]]">
      <paper-input-char-counter></paper-input-char-counter>
    </template>

  </paper-input-container>
</template>

</dom-module>

<script>

Polymer({
  is: 'paper-input',

  behaviors: [
    Polymer.IronFormElementBehavior,
    Polymer.PaperInputBehavior
  ]
});

</script>