<!-- @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="../paper-styles/paper-styles.html"> <link rel="import" href="paper-input-addon-behavior.html"> <!-- `<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is displayed when the `<paper-input-container>` is `invalid`. <paper-input-container> <input is="iron-input" pattern="[0-9]*"> <paper-input-error>Only numbers are allowed!</paper-input-error> </paper-input-container> ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default ----------------|-------------|---------- `--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500` `--paper-input-error` | Mixin applied to the error | `{}` --> <dom-module id="paper-input-error"> <template> <style> :host { display: inline-block; visibility: hidden; color: var(--paper-input-container-invalid-color, --google-red-500); @apply(--paper-font-caption); @apply(--paper-input-error); position: absolute; } :host([invalid]) { visibility: visible; }; </style> <content></content> </template> </dom-module> <script> Polymer({ is: 'paper-input-error', behaviors: [ Polymer.PaperInputAddonBehavior ], properties: { /** * True if the error is showing. */ invalid: { readOnly: true, reflectToAttribute: true, type: Boolean } }, update: function(state) { this._setInvalid(state.invalid); } }); </script>