<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://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 http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-input/iron-input.html"> <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html"> <link rel="import" href="paper-input-behavior.html"> <link rel="import" href="paper-input-container.html"> <link rel="import" href="paper-input-error.html"> <link rel="import" href="paper-input-char-counter.html"> <!-- Material design: [Text fields](https://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, in these cases it's recommended to use a placeholder text, or `always-float-label`, as to not overlap the native UI (search icon, file button, etc.). <paper-input label="search!" type="search" placeholder="search for cats" autosave="test" results="5"> </paper-input> See `Polymer.PaperInputBehavior` for more API docs. ### 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; } 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); } </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]]">[[label]]</label> <input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" 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" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]"> <content select="[suffix]"></content> <template is="dom-if" if="[[errorMessage]]"> <paper-input-error>[[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, Polymer.IronControlState ] }); </script>