<!– @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>