<!-- @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-autogrow-textarea/iron-autogrow-textarea.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"> <!-- `<paper-textarea>` is a multi-line text field with Material Design styling. <paper-textarea label="Textarea label"></paper-textarea> See `Polymer.PaperInputBehavior` for more API docs. ### Validation Currently only `required` and `maxlength` validation is supported. ### Styling See `Polymer.PaperInputContainer` for a list of custom properties used to style this element. --> <dom-module id="paper-textarea"> <template> <style> :host { display: block; } </style> <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> <label hidden$="[[!label]]">[[label]]</label> <iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" disabled$="[[disabled]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]" on-change="_onChange"></iron-autogrow-textarea> <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-textarea', behaviors: [ Polymer.PaperInputBehavior ], properties: { _ariaLabelledBy: { observer: '_ariaLabelledByChanged', type: String }, _ariaDescribedBy: { observer: '_ariaDescribedByChanged', type: String }, /** * The initial number of rows. * * @attribute rows * @type number * @default 1 */ rows: { type: Number, value: 1 }, /** * The maximum number of rows this element can grow to until it * scrolls. 0 means no maximum. * * @attribute maxRows * @type number * @default 0 */ maxRows: { type: Number, value: 0 } }, _ariaLabelledByChanged: function(ariaLabelledBy) { this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy); }, _ariaDescribedByChanged: function(ariaDescribedBy) { this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy); } }); </script>