• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
13<link rel="import" href="../iron-input/iron-input.html">
14<link rel="import" href="paper-input-behavior.html">
15<link rel="import" href="paper-input-char-counter.html">
16<link rel="import" href="paper-input-container.html">
17<link rel="import" href="paper-input-error.html">
18
19<!--
20Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
21
22`<paper-input>` is a single-line text field with Material Design styling.
23
24    <paper-input label="Input label"></paper-input>
25
26It may include an optional error message or character counter.
27
28    <paper-input error-message="Invalid input!" label="Input label"></paper-input>
29    <paper-input char-counter label="Input label"></paper-input>
30
31It can also include custom prefix or suffix elements, which are displayed
32before or after the text input itself. In order for an element to be
33considered as a prefix, it must have the `prefix` attribute (and similarly
34for `suffix`).
35
36    <paper-input label="total">
37      <div prefix>$</div>
38      <paper-icon-button suffix icon="clear"></paper-icon-button>
39    </paper-input>
40
41A `paper-input` can use the native `type=search` or `type=file` features.
42However, since we can't control the native styling of the input (search icon,
43file button, date placeholder, etc.), in these cases the label will be
44automatically floated. The `placeholder` attribute can still be used for
45additional informational text.
46
47    <paper-input label="search!" type="search"
48        placeholder="search for cats" autosave="test" results="5">
49    </paper-input>
50
51See `Polymer.PaperInputBehavior` for more API docs.
52
53### Focus
54
55To focus a paper-input, you can call the native `focus()` method as long as the
56paper input has a tab index.
57
58### Styling
59
60See `Polymer.PaperInputContainer` for a list of custom properties used to
61style this element.
62
63
64@group Paper Elements
65@element paper-input
66@hero hero.svg
67@demo demo/index.html
68-->
69
70<dom-module id="paper-input">
71  <template>
72    <style>
73      :host {
74        display: block;
75      }
76
77      :host([hidden]) {
78        display: none !important;
79      }
80
81      input::-webkit-input-placeholder {
82        color: var(--paper-input-container-color, --secondary-text-color);
83      }
84
85      input:-moz-placeholder {
86        color: var(--paper-input-container-color, --secondary-text-color);
87      }
88
89      input::-moz-placeholder {
90        color: var(--paper-input-container-color, --secondary-text-color);
91      }
92
93      input:-ms-input-placeholder {
94        color: var(--paper-input-container-color, --secondary-text-color);
95      }
96    </style>
97
98    <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
99
100      <content select="[prefix]"></content>
101
102      <label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>
103
104      <input is="iron-input" id="input"
105        aria-labelledby$="[[_ariaLabelledBy]]"
106        aria-describedby$="[[_ariaDescribedBy]]"
107        disabled$="[[disabled]]"
108        title$="[[title]]"
109        bind-value="{{value}}"
110        invalid="{{invalid}}"
111        prevent-invalid-input="[[preventInvalidInput]]"
112        allowed-pattern="[[allowedPattern]]"
113        validator="[[validator]]"
114        type$="[[type]]"
115        pattern$="[[pattern]]"
116        required$="[[required]]"
117        autocomplete$="[[autocomplete]]"
118        autofocus$="[[autofocus]]"
119        inputmode$="[[inputmode]]"
120        minlength$="[[minlength]]"
121        maxlength$="[[maxlength]]"
122        min$="[[min]]"
123        max$="[[max]]"
124        step$="[[step]]"
125        name$="[[name]]"
126        placeholder$="[[placeholder]]"
127        readonly$="[[readonly]]"
128        list$="[[list]]"
129        size$="[[size]]"
130        autocapitalize$="[[autocapitalize]]"
131        autocorrect$="[[autocorrect]]"
132        on-change="_onChange"
133        tabindex$="[[tabindex]]"
134        autosave$="[[autosave]]"
135        results$="[[results]]"
136        accept$="[[accept]]"
137        multiple$="[[multiple]]">
138
139      <content select="[suffix]"></content>
140
141      <template is="dom-if" if="[[errorMessage]]">
142        <paper-input-error>[[errorMessage]]</paper-input-error>
143      </template>
144
145      <template is="dom-if" if="[[charCounter]]">
146        <paper-input-char-counter></paper-input-char-counter>
147      </template>
148
149    </paper-input-container>
150  </template>
151</dom-module>
152
153<script>
154  Polymer({
155    is: 'paper-input',
156
157    behaviors: [
158      Polymer.IronFormElementBehavior,
159      Polymer.PaperInputBehavior
160    ]
161  });
162</script>
163