{"_id":"@material/mwc-textarea","_rev":"713-4ebaccd87dca61e0bbf9e267de4c816d","name":"@material/mwc-textarea","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.7.0":{"name":"@material/mwc-textarea","version":"0.7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-textfield":"^0.7.0","@material/textfield":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","_id":"@material/mwc-textarea@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-X2U0Lq+nx14p6u7f6GiYdBmKxiiNxxPKp6CHs6NF47taK4VV2RniuRTl1lgtOIYoBiNztvu5chIsdiQa48c4Kg==","shasum":"8b6bfa30b15c12226ecefd49e3d0ed287eb4fec6","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.7.0.tgz","fileCount":16,"unpackedSize":195708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9uCRA9TVsSAnZWagAAV6oP/jCdD2md+rz8lUDyDQLM\nT+7DJ2X1XBR6Dc9VldXmInpZKg+if9YzuhP7Izh6jjF2HER5nU2wrN/NQcdF\ncvS+LjF0V0c1yKg39taCh00fNl4uacum/G3ybXVyfFa7LAN1xBCiGFq5NJqH\nYTBvJhJGw+tQpJrwZOqWTgZ3Zbmq4a9NL8mGCU6W/9cFkRN3EWNbWAAmjDoY\n9y3RxBESjye4ElNP5TbF5c2FTpAuolSVRS4L+xOqWynytWPIFJWSj3NQtx3R\nkZwt7kVMCwLai2o+Sx6InYCdXshv7Kvaecoj2W+hqcGlXicDKeMQqJ1n8l7j\nl8s7RqPnrjY7kTxltSI4bru9591EnkQxsU5VqIvEuq/L1vUWYuIDmizoOkDk\nxdeLSmrf8PH2hLMtn1W49viFnh4HJrtJdpyfxYix51snblKgqFtHz5QGDN5X\nn3ibR7hLvSwcMAr5uMGm6GS5Y9wqUP5yjslqpBWTdIVlWR9gJ4h7R9jJKe66\nWFivnEwMpAOQI8wgMSN1Z54FR8g1UsOknkkOoC2Hf4aT9K/Uj8aIzeNgONZh\nmZVOYfOj4B5oj4PJuH5bwLcdWHfEZsMuRaUix9T7BQ6H0GfoQf6Q7YYDE19z\nH5BgioaPv5zPStjLO+SCXgzdcQ7ynYdzHRg5qFrbawSvUabN0v8jQ98YlsND\njOsr\r\n=9/Iz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEz9brNppN+A6YPKHF/H1kgvFfOWgS4J8eUbe0YkMRZaAiEA/FnEC+SKbD+EBHehfrMoAMxLJJHDtuMjfgwxbWPFzLE="}]},"maintainers":[{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.7.0_1566941037462_0.5878721616563656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-textarea","version":"0.7.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-textfield":"^0.7.1","@material/textfield":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","_id":"@material/mwc-textarea@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-nsRq9J8olH7rZi/WNjfkrkH4LPiYdiswiODOYWMORrYthQhPNQZ8KC662r8edBspEsQnIAmTjZkjHTfmWr1Jeg==","shasum":"f8364b8c58de2d57e9b59c624fec71fa9bd58f8f","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.7.1.tgz","fileCount":17,"unpackedSize":203935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezvCRA9TVsSAnZWagAAhowP/0CKpKLGqcyZlub4bfs6\nNWiTgpA42ezqusu9oE/sRVZfoxLwxjAG/Ib6rmAToxYjS6qFcMYxztqRdbKA\n5MD2N5TDcphJMVfsjxYI2zxUZWhBr1DdCb7j/kVw6e3tUQqUW/TNQGMPWxWm\nQNfHqwYzUhX3PgHWOzSkCC8hexIZqwvvVFCwOJljOkfrVA3SJ480NoUKQqYq\nRCvRBFSG9sOiR8T7YBkHc+TXlJrd4Ne2fnTjFPxizrrak/F2cIZkbdwmjyVB\nsW0ZNwvWjpSAW+19ZteXZt1bsBiWN0RERo2BOD5+8VDoDpydZki0UJlNCOPP\nzxhLol4j2K8aJ480SyxJX0hsI6RA0EVBsG2NTkL91q/bi7UDSPMJ0J8j0MlY\ntgqje8PghlKQk2A9MAPpubsM8ffs9B4tXuX80ZwwQF/77byuUW9YHi3cJsGQ\nU8VTKBb8UMONP1vLPJOym8xeJqoG7TwGFFL0U5wLtI+JtAAsp7Gnd6SsOGdq\nWycy2BMmjoAsE68Z6XfHKSLw65FOo3Ojbm/JCGCUpnpfG3HFt2VTqioJ1M7X\n//jN/7VSuTMEXm3SiBarm6UlRa0QlF8t4dU+5USCkfv8pC9LsgUFugc4yBhz\n1Lr+YFE/5N63yaQRY/IWscf8f6SYfr5lqGeuoDXD22tv0gurPj5Zbl4OQOJG\n3LRw\r\n=mJqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGf33edP6zhXOVnr0qfJqmxKRy6O15V5TogwqTDG74ZmAiBYUFuUZ4y0hiXQBaSFhqTKUxZHxkdpGRQCsp1I8ADYtQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.7.1_1566960878872_0.20663855789707664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-textarea","version":"0.8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/mwc-textfield":"^0.8.0","@material/textfield":"^3.0.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","_id":"@material/mwc-textarea@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-1P7OziGi1+d+8oH119ukfU5cUoEgBddhScjw3smcVTJdBzeICP4QReF3gNyK6IZCC5iLC/5/exOOOQY1MM/99Q==","shasum":"3abd8786b5ba667221e544c5e28c41635dc7ed86","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.8.0.tgz","fileCount":16,"unpackedSize":194681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+eCRA9TVsSAnZWagAAWYgP/0tPeCZ5YoKqSOcb+3wi\nYEBrjPzEUuMOOqwm+jhjUL6wHW3IW90VmM11pCOAIk+0DI4mdzwdhoOP6IQY\nqfRSoRuj0KgGfWsBHlNN1RdNaDJqDGumYOIEk5Z4zzLim7xlgC449qjspa8n\n2SM9LIrMJR4Yv0F8fU4KMYRH0pGnmsj5upb7MtRdvYTW8zR7k+6aoNRgaaM3\n55U5KO7bVIZiiyMTBXRJZmRZbvsfCmY0s9FIYgwlkwkg9uxCXbxfV9+uqXaG\ntHmiiEKlbwlcJNTCxsX/D3SAiiAQ7yuOvoCFzV/pA1iijIkam4tDWQSR81xy\nXZdOeXUC8miidZKkcRFFu+uqjqptcET2rOn38JHC1bl065uD8ypW9pJXPA7C\ndZnFyTrVXZa0r2/MwLYDmj34pgJKnNOu5FzYAiSn0lbhn++XquHcVJiphdb3\n53r+PsBqGCE1PuhQgztVlWH8cd2gLAz6f+dCjfYKF11kcYhUfl1NvzddFYnF\nWhtoIgsLfd21fShjvPfdbR+C7Pj0N2snteMMiy5J5U/Mdm26XtZ3UO4GdHAo\nA/Asy0Ml6j1VPJzXRQTOjG2AJw81qzTYHDxZuigwHn2TvVJCLSESvlZ5TeVY\npPA5yiT/LIIOMSkt6MgDvWhkEeGWCB2gHjLE6S+n5o1OkCV4VQKyet13bhLs\nLqee\r\n=zRWB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuHIIKgIYNWJJXEXzQt/O7vqj18NVHULtkkpXV4tgTxQIgCsBawMYCCIm7DIC3OAcrfOVmiEn2+ZrvVYi5lKu/Pnc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.8.0_1567555485776_0.2891166637083822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-textarea","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/mwc-textfield":"^0.9.0","@material/textfield":"^3.0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","_id":"@material/mwc-textarea@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-vKSXQ2vngUgfO00IVuhK0HXMnU+Hh+hKqszp25MWecgx9+7AeJvOce3QGE4o6OIeu0VG+RkBavEW/0YiVYLLsg==","shasum":"7df15a5b971283d2d54a491981665423afd6338b","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.9.0.tgz","fileCount":20,"unpackedSize":212622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeYCRA9TVsSAnZWagAAKTEP/2S/Iw4GIJMzKmc9A3ac\ny2KKDkJEkhu5WT0KgYUz+Ci9hRL5SGP9E7ANAyPT5fRXh+RMecvX+5EEgIp7\nNaNMnT2fzsHAa3E3+XWn5shyRMPlr9fzFf0McfYRJlMkxf9Ma66/iN/CMak+\nWGmAL0IApR15EgamXwf4xVRofqIe4l22huq5JFhB7jX08XlVRFlIavDmvBlB\nJ+rtG04mkv7JcnsbxMIfDeEhEDu1Dv9/gKTEW6b1EwT6cOQf98ppjjWXCYL5\niswldT4Ay5/rmQA4So5uRZcZVlenF/4enGZlJwatkxhkgS6Nk/CWfUPOrzGY\nuJXlOoXdu7dgKEdNyXs3cc99LNlkFUr+1KhkUko0XqgevdFQDX6n0MPL0Oa5\n2RdjH0lQW/WwtKvh2Cfhs9ktHgn8H1mBGjSMTsTTqHORIkhHXM5ybAKf8LDw\nvEuN7QyX8lnAVzjweoMtpOiQmeD87WbXad1U6HhElpmJLEZCR+pS3wa1AB+6\n40xP0su5sgjIc4HHshXzrdQee5S3ZLWi+aXZ792fx57eoMGhxDJ60dHm2QmN\nmPOzlyU0ux4PK4DGM2ysBtlFRx2MgfVFCQrLnsMh0U8FTVgRFoX12x63506j\nRygVQpv0YH4/1PJ9xDhzMeAExN6xk9Ff3cG2/tVhs/hQB+EO5FU9iqkmC0/K\nKUx4\r\n=hxzj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC28OenA2muDFeIfasnQa99/2py5ochkXH1ocI+t045twIhAPLR4Qcplm0rVsEKGqbd7Y5BtoIg/e63DNqGJ9W7/ep2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.9.0_1569548183610_0.09814340790297771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-textarea","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/mwc-textfield":"^0.9.1","@material/textfield":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","_id":"@material/mwc-textarea@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-zG0TVlsZ4MPJTsUS79dcLZOrGswBLYv2t+B+FMCGYm9iSrbsL8DfwPE7MrWuOWOpotreVGe8yNVGg88CfQKX1Q==","shasum":"d77c6d53c0e6d2525794cd7dfdf2f116c6fcbf45","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.9.1.tgz","fileCount":19,"unpackedSize":205590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4NCRA9TVsSAnZWagAA60cP/iIsf4Z9xswhigHhMA51\n+t59mpShQpmzrPQwitmwN79AwtWlmJ5h9uyLuO8Bi5R7mPEElck1jgQZC86F\nJJLq1RGS/ZVH19HVLg/ouf9KcLEW4LxWHehU6UEdnbt5nAX29St/Zilqxj2/\nrj13xXVP3gWxQu6I3ACA/iSmlAbszA9P/SlileN6oJF5C8uhfwRjyJMw5oyd\nsDJyHpP3AyWlh4qsNxFK/XjyvD4SgCdiIvwp6SMfpoOT4t4KYywMAP4hmOj6\n2O2qMVgshRmjGQJ+3G6A0xEuHZ8uIceOMIfpXuKVTUA44WUXze2n4NGJ7NBe\n2e0ltgf4h7pVu1ws7ato1Cz16fnn/gIemHlbAm0akKTBdm+fpuHmt550+Q6s\nUmeUKjkllpdFPEKFS4+y59vPKGOwD2TP+CSSk0YNrupfgGAuoPSmzT6lp9TJ\n29IRR+jdD385vO7az1K+j8rebMbGBRQyXyYPzXPeCUNcyglG0TAk6YyH5kA0\nLUGi948RIsNBtZ9L+R3+JuBi2zPm9iYiMerwnP8MOjSwS/SqUj7G9NvN2ntI\ncJuC8Pq3q4v8CwKv04yfd/spfFTah05GF1LfJug9WZrsvO3lw4K5wte39stP\nhCC5rt0Ah4Koe+YQaeDMh4B0JBJg1v4eQ7QhUdLmOYGIYo0LArMaX/3xr3Om\nYvtC\r\n=ehoi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPRSyUMU/Irz+FTE20NA7yPhztwZf/XFBBq9yW0dxDygIhAMZsVZuPwBz8bWmBSIS3uE/W4OEiSbqP981QnyHdqang"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.9.1_1569877516546_0.9589315928539202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-textarea","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/mwc-textfield":"^0.10.0","@material/textfield":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","_id":"@material/mwc-textarea@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-tgwMRXqHt1938FnQnGhBE7T9vsiBClB8/F4ExV7L0tjIgxrWjRinlMCeXbGTOnpWCYn/WbjAtBSeYKHz5Sz51w==","shasum":"fdf43b78b70b4ef3c0093941828b26e8f004f91f","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.10.0.tgz","fileCount":16,"unpackedSize":203480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAbCRA9TVsSAnZWagAAbf4QAIclqfV6NWPwh64xkmDM\n45adlG15/evbDyIGLH83TvZxZSB+477C8oslZPtkaqR7LMNSOXePRIVLzgzL\n2xEVDiA09DSsqL8TMd1reLb19VEyu2BQEHEWRLhN/4dC3zBUvJ0VqttjPKzw\nag6GEz0GqAEit9pMjyNE5agIguS2k2Sh9Kcm/TdorgHwH8t6Vzl3jBVbH6Ap\nxhfWi+RoEcaeqt8sV58gokdYuKFnOKoeuFPhBjW/aeHuuVrM2MvQZGdIZRKV\nXpOUN1HtYd3Ys7wrOmXnWbCyFb1I4uK8tQsvWsQ1hGyKKy0VW86TLBJZOET/\neCx+1ykoO94jho38qL/yPdQhNgMZWNApk+lZSQaBK9oe1qxlsbfPPqVlJtvC\n5Da8mwUwQUkUE/4YG1PH6m+V13X2XMcFQBZawQObuKDzLBH5/yNeUTUeu+4m\nx7FjNmf9bMqsgGdXullsOQbO+1HfbnUSxv8NTHGlbpF7mmKb5/H/BbyAfkM2\nxy5ClsDeSGxEnfvg6Gilp2RYb9auZHpEKhy+t3Z34TQVWbP+rSIfYNprAFVj\nATpIcP+z18dUuhlMSdFzntIFMmZ2ffkrtzZ7dF1aOcp7X1FqGH4R6Ihf7jEH\nVVGMdP1QH9H2DEI+21rMTcRcMOi5ODs8KSztNTu8qmKex4BvdCCg+ZH8kwMh\nz9OI\r\n=qkQQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0wTfIf46R+sZb2ebzCMjLr/rlOCxBSV5VcBNtFPvF2AIhAM+qB5iEkhDfhTySTAqKjYoY2C7bTvBD6zL3l9jt5mYR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.10.0_1570836507032_0.36521784414795455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-textarea","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/mwc-textfield":"^0.11.0","@material/textfield":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","_id":"@material/mwc-textarea@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-wiuLY6t401+FevkT0NyKq2qCCmxayPJN0nDNS5FPUJayPintRiKgOU5i6ZvbbWSeM+efjmAeKPMtj9Sq+As3xQ==","shasum":"4e41264e00faf27878d8aaaa5498002babf48abe","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.11.0.tgz","fileCount":16,"unpackedSize":200096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z32CRA9TVsSAnZWagAABFgP/jGK1AhNVKPZYCsC+kPY\npOsQiX8HY52VUt9tjpBlmJWrcr54USqPKwDIHJv/x3of1TPM8fljeq0qVTjh\nIRlAj6PHVJyWstt4JcGXCAsMSPUQNk85fBq9sjdkc7MgeRtX7XkIWvaU+lB7\nZJeYReLEigTuv/ynJv0BU0uFMfhomjzMPB+l3M8xwj/pVn3EFYOYDhzpKE0Q\n5Ajdr10pNmuGUVx0LgkLVeMmyncF5lc8Am7jqSTNy28H4MHuDgrXCST4YKTD\njwezUfCFfRiio8Nl+EBHDC85ZIjXeFTaveIP8HeImdi+P8MFTZXpBcwuBCzM\nAUzKj0rlLlppyvDeWGGn2eee92V/3Lxo90Be0wYjlSz12fPlRdfwRrju/V1n\nwpgY6GSjcWhfhXVIcJrPjrEXG7E9f/9GqPWmuFZ3CIAB8Hs7rYITKDvFjr8k\nAl4uM260LRTml7fyVM762mWXUiVbaRBmfGPTHXemgaRgKzvF6ekQwc6rbjTh\nDtk3cUWNc/aZzdEE5iO0SRG8cZOU1OWJmSNBvR1wms8deiWeCjpeJ/zqah2C\neOqDfGQW+hO9P60wG4g0pG+QqOWsvkNSE90D1W8Baq2SX5Q1q1YLYsjBRiwN\ntpEqNEc+u3FrpPNa+Cd8wAarvS6dTtDibQIPvYXzTU5TGEo/0v+KrklxgEE3\n0Wtl\r\n=dLdg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPjUWyhdCMvtDuPwylWLuQWqGMlIXLVTvUNeRc2GPYZgIgM2UDp4oxACLDUNpciE70RX9EzT6p1i/Hdrpz97eBZTg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.11.0_1574804982307_0.6837003561665373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-textarea","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/mwc-textfield":"^0.11.1","@material/textfield":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","_id":"@material/mwc-textarea@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-T/FOYwzVfIoSZBQ+jpfIiJCiub29EUhpXCq5/0MrtkIZx/JpsIg48DFxSW97QNFWyYl/RlQl2MI+1if1xUZbnA==","shasum":"ad69e64cb868ef089972e8167e13dd3171708f49","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.11.1.tgz","fileCount":16,"unpackedSize":200096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLECRA9TVsSAnZWagAA4/AP/2LS5E7Hq0pmwygTp5tW\nXxDA4UT/izTjyGE0QlKwAOvAK9hCQ24gf95FWLJHwNWe1qBob4b8oCKJmdg7\nc2BPkfo/rJJiDvXRVCrlgXBvWIP2nK1KP/ma/Zf0ey/He69zMnc/O7P9Tu/C\nUTBn4AzFcbHBnZM/J55aK2x53FPj8L+RDao5EdRutPM5XHOcEVTrzs+bjcP7\nHGalGxh8ymeE95YR/3SlF3CmcanOwF5bEBp/0fZi7o/U8gEsDRbGWYE0E2Uk\nY7y+rr8n8y2kZdHdOhp+nBzlCrVmxo9+uTaYHIWsTOpalqNhuByMXf8MCnAW\nTY9vNdwxJjPedPX3ILyDaBJjwuM9xAJz9h+bqJleUEXWgnq5PYS90Hjqea0V\nF5M/IrlgMpZTswpcIxjrj5liepVlau/2yJtZQssuLWH4KW7iouK5ry/3bRqh\nhJGiwmWCUdv3Wa0hUW0RBw5wNg++itgUSP0EXNShBr5TcbwZbXz9AC6xJD7N\nyuLb3Q1Zj8BipJsUnGkJ+vk/NKFhiyg7ng/sSZa9T8SZSBN4K1qrspJintOA\nzvTK5jYiyaOtA+XBsZEkBGnhAp4ww3rJs+PR3VfhBgZndsOIcD9TpmIOHAR0\nkbK4sZ+/bfsgCxoxUiBa9RfMP/RrnmCnM9rSakhwGRJ6lIDUftm6bNln4UOf\n228B\r\n=w66g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjB35A1FZS+LVZm40E9R6e7zCVqKp95XoSDsxdJUhNOAiA21S3YDCPu5KUsqJ8Ew5/7xaZt59p0u2T5H73+ZN+jwA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.11.1_1574814404056_0.6090885183365511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-textarea","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/mwc-textfield":"^0.12.0","@material/textfield":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","_id":"@material/mwc-textarea@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-53LLve3jAR1ScsRXSG5p9A1lX0nxOa8Me0gLsoGsyASrFEaniTy401GVJnbP5WnWs0fQB4w6Y2aEM9CVmqGf6w==","shasum":"b2b878d0e3dabebbcb6c089d5c5515f044717c58","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.12.0.tgz","fileCount":19,"unpackedSize":206916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkvCRA9TVsSAnZWagAAh4EP/35cUHue9AKkWG0FkzT1\nMsepWQvKd8TNR8jYZkzs3fSEZ1cSPGhvksXgUMvi/J+o4CrWLtsqV9QdHkpk\noIj1w8X8XIZuW/oE28NmOFvIBKFgPruqXvgIYUjBcfQcO+nWiECQBHdXNmgl\nroSN39vZRz43Qt7uDAQhLyn7KJztl/fcCXIgBPK8MfLunFnDqW6Dn0KDXTMJ\n+05kUN7PHPN62xJLXccsN/ixo19DZz0pTP7cm5qfZof1/GTg42gwOjVa+ZOw\nfeWG/uUttQ5fJjOrO81CKXWbkz+qiZBlhuwW3qE2up1OZm+92rwFJ6cwwni7\nWGcnLXZSjEDDNyrmcuV+Mlx8tag2+7ODVRpMGevuQxNjD88qjTtPTMM4FfwU\nJlq2drxoG5QQLzrkDqqpG6YRIsquQ+y7hulbeEoe7c5K/7321a837LXYFrCv\no3bwOkKxYpgRoQTl/oyjFcIn/tqgw8XptBc289ZpoDLBsXCQR0c9tVehxobS\nZVsAx++jzfqEdIRN0NVrWFabm9RVCWijOT9GmhMXWdbeMToDOvmLouVpf04G\nqSUKviYhVpDpAGXVRqimSMaLamr+SF8Iw/j7BXHkozXJAYsiuHcxeN6PQwO4\n6ssHcYML/E7jPTJSvdkp+GHFWeCctSQNmyRc1LWJ5h6IGohL+JOTGltTMzn7\nvYAs\r\n=alJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRh05SVoaNVz0xvMlDLU0uCgEUUIUXSHw/0OqiW84YnQIgXm9emd04jOYMyaHzfGLKI6fm3uVwtgCAAYWhoM1P+IQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.12.0_1576626479115_0.4285217189958599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-textarea","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/mwc-textfield":"^0.13.0","@material/textfield":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","_id":"@material/mwc-textarea@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-yc15ZTuy4euipRFSfvvcV/OsgVlDYGTn2Cdme4WuIOeXHo+I3jZ7VPyRjzDcJw6AKUwZ7yjeAsEzgzNJ0KNTNQ==","shasum":"4f6f5aeb15982cb84dc0ad9294b4b74838b73af3","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.13.0.tgz","fileCount":16,"unpackedSize":197651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPc0CRA9TVsSAnZWagAAYQ4QAIENw8wrodkyAtHCeGsH\n8Di/X9oK7Pnb3aY3C32kH7fd8nfrX/fbm7BKUV1MRLgWwosO1zmTRG1ubuHx\nWrZMO4kafxtQx8FU+GOM+Gru54um2vOimc0PfPzmEvICzFEQPAP+shoilr1p\nsmYn/ot2K9OyXYj3E5OpCP5dZbpae1kCPYpCBDWQDtBoCGvvQ5cqVlOtJwoE\njd42ieoHvp9Jc3MMad7HzLJwRYJc4iYFZYu/9jpUTuRKutc1PUO1gmsegAgm\nhhjhW4GMDoOkVEYYt2AimHSkY19rEKBmYWpSvh+f+XDiFyhzNXnlxcdhFZbg\nBcYCmwQNh9ooYzagrnQ7MI4PVkbj1U+243rRoPNC8pT/NGjZChGKCHd4TSV/\nDnw6fQuRsJv+CIY6WZUzDKWmcgPM5qKZKpzhbAtTyqsQjsxmRFWuNghy6g+W\nDBuLV22DiAdkLq350+vTHnDLmkDgOl/1m8O9DTfZ8aH5rJ6v0B4Z5j1hfKhY\nAnNSJ/GwDU+b4sVpZ5yRCTbk/5lyHY1SLe4C1PB3T2tfqPui3ZO2MLojJjD/\nKNC08jxrwYALlCmwrY0wDskQSWAyknFxm9VcV5I4FjDpQiAqF6CB6fksmMD1\ntLB3CIEfygDsH+60tYwWNUCxORgqsmGWViOQrOY1PK6vcFGt2tmGl56Hq0aU\ncnjW\r\n=B4Oi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsUjHZSM0H8iLj8Mg89hx5PpzHOynoGZbr2X0s0IdHKwIgNenWxLJJtDunr8FTdP9QDZByhHXlQk3MubPQJFfS9Fw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.13.0_1580791603827_0.6786304908760952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-textfield":"0.14.0-canary.f790f713.0","@material/textfield":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ft6aZLtsrH1ynzxnUkCBOHDxwO2nLT1pgDcm0zyDxh8FedvWX9zB9j44cT0C41KjRX93CcN82iflykS7DNlcEA==","shasum":"101037d2cfbcaaf0c8f20cda9d928015e02acd75","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrWCRA9TVsSAnZWagAAvRcP/1jxRqzEF9zpSiVmgmdM\nae1AwAhnbCDH7kPBIFw8rPO8B48q+LWLuSPjGitMp0ABvOdOrDZIT/i+d9lu\nxHkDZEpBFM5PK91eY1nv8ZlOZmq2SA+gBUaYztmyeAp1oB1139AN8sig6wSl\ncCQW+7OvKaRZ3Mx4imMnZBhI2HBCGpBqt4NEEribI1ZBYv5br84zWcERep/J\naPfHiFzAxCFW+5EHIhzFaoE8zfwsljd2U7CvEJSiQzl14x4XglH9BuDwGhjK\noLMIHNzer7EPf5IDnPk0wi7EWDM0rHiuR6Wd4GTUY0DVNWFHbZyLLMgRkoXX\ngRWXlRsP08k+IB15SARJKQguvhtFc4/1AbEHdwruQ217bXhZyAprlsTTWi39\ngyhRgKbHpfbLXjejKiltv62VQKdul1nBM86p7OEV3Ve8LHOuBO6EcjsEqCz+\nGZ3TPsGG2H7lqQoBtq0lNVaVhjKEUoh+KbqapxoVjsu9vH5DxwFBeTyy78RI\nJSOOqM8NfREqfCeNsWJs/fVRnIVBwdRr/+UqMYQy8pHMVAcmhVZdJqL0BWO0\nisF+UYKm7GxnaEBnp6USTHWSBoAP/bIhArLjUrRvKZR3C+aBkDCWDLIgDHOr\nSZhIyPIkUM9uRx/WDEzKfLAiO+ZQ93NhOk/hA89bclqwzkn2f9zPlZEdATjS\n8Luz\r\n=vFH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdEQ7eNdJBFIRNW0ixsr4NkMpWA/7F0mjUtVkiI5JXwAiB5cD5xLYa1M7E5EgucbOra/Jg36o+hXznfkwz2FgaeYg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.f790f713.0_1582856918414_0.8892537257021471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-textfield":"0.14.0-canary.c759cfbc.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lfiTKNJLI9WgmEltlHqISL5x+FQi96y+sHVWTqp9+q5cxjajoNyyLsE+XXO6jD68wRmYa0pR6ZXbVb5BsMIjrA==","shasum":"fdcc8ed94a329e445bd854b6a440b8b57e2d64d0","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaq7CRA9TVsSAnZWagAA+PoQAI8DtkEAr6c+jhFPWVId\nqyOv4rYvoZZy1hoHwEX3Ww/ZapsGmZsiU03eqs2acYwQMA/Gjfgkflfzj/KW\nqokVi3PP0CPRAg2ByIPRAfzvOJTZMrroq79Uy/kEQUkydZddBC2z3JNAWQx7\nNOwtz/RQpEfRqxAI66syHQAnInAPkpXG7mmzEQ2Y6qY/TxUKPqsBfgz83ZeA\noCBPwHUK7157O+NeKVhjMYnzHWey9snunCn8DJirXJvXq1oMUy6VekDh9hRX\nlYJdovphl+M70FTUHwhEmoZMThdBEvogopN2ZUkobkvt72XgWmavHGgqGNlm\n5f8YdnCyt9lu1Fduqz78mZqTRANfYKB+OvodBEdnjTijKD5lKREHa17Kwbox\nMI/Ko6PM6RlCqdIFlIrEjS1CEkkwgVN2w0p8CUANu6lXDQhqkBdKW9ame/Oy\nBEEnB5vQFl0cZ7MdeVBS9PvHd0XocvbiTPmpxlEuAsJF222unyVgCWu5rUZj\nZFIaTZSebiURumPAvRe6LKLafUN2+K0e2oRPmKngkleNGJZkY20gtxM+QXhz\ncMjrtwiZGlEUQo+14x2QO/+Uyu3Tur7PV5k7Zc7bIoq3O8m/mg8i+4weYcnD\n4Z1Z3IHig4N+F0cxDfuy2iOQaMwVD3v00CaZ8X3HLoQbX3e0Y+fB2wm+rnM3\nAOaG\r\n=a6Xt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuF+FiJ6UqVbcWgbphjKS+gn2jupeiqJo568LGJ65hYAiEAjWHexXf2SkSSlmR5gPwjRN6IeTEFkzWZGjUFzTS4oNI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.c759cfbc.0_1582934714646_0.3083329379076247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-textfield":"0.14.0-canary.97ef53d8.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sdBtSIKiD6IUbF57+so5wjHiIH7oMzm0SF9GmF4ncyNnbyOPqeeAB13vZT9zHAytdnx5hWFKha6yafSOT29+hw==","shasum":"5a5ac4279270264e2273756e26a2e82f45fdc93b","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3eCRA9TVsSAnZWagAAk94P/ROLNBAqWRFebxtCkrfx\nrNAX9aEvhu2LPPgrirdQk+BORTy+C5EK+ZKwC1Nb6nvbnBBfS1GhSilYWsVV\naxIeM6lFzR28MVQG9Is2LObV5YE4wmiQFWhnpJJUrwKBhH0nGR9vOMTZ8DJB\nJ2SUzR0IoDz+fdVwv2XTvtDigy9ecHT//mHMBxQahWk4hKpBZUdYNtsoTwB7\nMV8ljNnssfsO1haW7OK0ZJlyU8GaRJIPlisRTI9LrgxvIyaXElhlzNcbUoVE\nCGvG5eAn0bDJhHTSIxPdLIeADeDdtC2Wugc6yvk8qQdVI36TsjBFQMiP4qXM\neaBwJ27r1xxogJ48f1KqcGUdL/18L7b1v7Dz8s9OrBx1Y0SL0yKQnopsChrf\nFKC8dbHfdJufpAGEV28aGWjXf719bonTbYzQGZ5IVquE0RRvDGbJLamXk8Mr\nD9/WBYhnPEIZS4Vq3nnDFQwme1VeOnB1LkSxTgx6pCB169BIno+RxwjnliOO\nAMKFVrAxu35yRe1lYAabHc+zL2t4GvuUUBr53n0O6F1KcMm7FI7Tk00uQiuJ\n2mtVLEMVVsDXJUhZq72mmQNbmX+ZHmsg9UVS/lyDDJFhXHXH8N0/LmS6o98B\nvU79BMTXNaepKQfcZlMNX4q8TDJInXXN4/pFDECQ/jQuD6E4HsL2n/0ij9Yc\nMe9k\r\n=U09A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDauNMA4C9kl6xwGTocORfce9MUJ5fE5ACgiynB8k0BAiEA9FwmKgZ59ILR5P/up1KQwE3CfVCltyp1WFAMCElGY8c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.97ef53d8.0_1582935518337_0.04889816121412949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-textfield":"0.14.0-canary.24f5fa6e.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-g3YL9wpeCnBvTeM7snVPZjzNyBfSpvUSgDv1+OoxUc2mUz7a7u70X7s7kgMQSRLir6EWqJMnXdNMGsjiDgWYLQ==","shasum":"d94b27c3cef65ed18c27795f2d7f3e8a2eb34e1a","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmuCRA9TVsSAnZWagAAN6AQAJ5yZoMHCaAse93p/hC/\nOZUeZhNdLNfdD4bkT+MP1fqzjz1yEIcGd9+6qquchp5f3M0ZfWGUobhSoZpR\nTXw2eMt+Kl1H6vhsn7LLZig0RckbTgIYXcpIvZUbfyNU7YI68iPyL2dB1iMN\nlmGbyKQEo1dnWPSONEsuW9oVprDKJzHxASzu6w9wdEJ8kqyoTlzeQCIy/FUN\nFHJ0I2As0hGk9GX2+uiWv9XV4jbSFX8TVPA5J5WHomvg/bLU4r9QlwNquZzh\nP75+iFQ/Z5tJ8ObwAd9GKk7FnKc6N7JVBMpSHhm5PziE907n/pN7JgxEgt/P\nC+xacV2Koo9arqkdl5MtTBB+CybI1fYi4VS0dn56UxzpxeW7fy3+jmCM7act\n5+CHRvmuHBoXt9Uk137YBE92JUwRaExh7NOKlMLGZ5PCk09k+IGzWsApVcas\nBR4DokxaS7W2Ui1JAEPHRH2wOVKhPH+UABJawC889tUuZBvEFMTJOp9GfaRm\np5659o7/whu5mmeXrnuTTQ6BwmLOCRFSaEPIjnkLfvV1E3TqQIMvERjkkO6S\nhikh15KCRsRmwW+5T/sjwjOgGhNIlDEvApVTImq+LnqfLd25VV4KPThKaOGH\nhWYrOubSgVG2Ifd1Nk6LtrhbEb67J2Q0BUCGIw520qEsEN3ye2zH7TlGuilg\n9oPk\r\n=X4OV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9ZqYA+nyUHptzOdu5erzMJZ+z1TuPSPEVlKgKntfimAiBLeHroVUclXBsCtZQ/GpaC2U18wd03CUqkMEHwd6SNYw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.24f5fa6e.0_1582938542192_0.43598904071299205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-textfield":"0.14.0-canary.960e214f.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-P77Eoblks8E3Ba0SQYD2LWGpCtDfyfy/JXE1g41TL8EmH54grOL4hytWagb+qhE0jylZuWW0g1EYMXx3lhmEvg==","shasum":"d3077440dbed3f7ffe6389c8dcc174fc9e06e8e6","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":204500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXjCRA9TVsSAnZWagAAfEAP/RLmpdS53LCUqnwvs4m5\nyii448pXGbTrG3giAqzhOI8ebpLx/xaEYVCoKHZt/y3fTc3d1N5xhX/L0ecl\nNFaZNczyilPFzthbwcy2pYNbuRVn+bgAv8u+rvf+o3IPMydkhjWbpqZSYGtF\n64n6+945fPgu2JLCl/hexmt1/vfrQGD6o6jlcX882yePON7ymAEmGDC/Fg5y\nVju0WBN94RlJpeec0aFhKcs6WV5NKsmT/1TiEVmpFebaMyDJgLmAjzKoGsGA\nNqyAbXCE57lf6uTje2FEczkGQoKKaKq+ozqgAjhjrysyuoKd8er5Ds7Lrpoi\nWLejHfE7im3SOuT4fXOtG5SHtNrQ/hULKbuZzrtNRt6lNA5kvt3A8BJicLSL\nn/nMlkq5ogINMO2/xm1m59GioIUaoUt/TrorkCv8ZCTOCoxyGGwqpePH9RUj\nqoU9LnXaOEu+N0IZy6z1Q+MOlcwAbIBTwN3Oi/4pr0o/uoW57cYp0T2/+ZVC\nxhp1O1UVNKaU0q80JaoquAZ2REcl/feVTGDJclekBhN7ECbVq7ibOUIZY4ms\nfWCAFtjWOT4r4eAdK/f5lFDs3ca1a3WPA6t6NDY75FREtDFIVujAf0YhvZfU\n4NZkOTcwrj2DMMrzi4JauEI7wFMdc8hBQltJFm30WeoIYdDWMssPtpGqEe8u\netXD\r\n=6uL2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxUfWMGR3M80KiDInZqyEpef84IDDXdbe3gn+IgnYWuAiEAukA+yBr15llk/Ktsti1ekPBnwxGf2YBV39Ux3L3+kTw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.960e214f.0_1582945762922_0.20592222230512047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-textfield":"0.14.0-canary.a2f046f5.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JIDCqiugTJuQ9fZnXO29qI8ASqg5mmpDikuwoJ/NYWF0+dX0xEsDIblSTeuQk8Vg/c1z74fgbcn3r32cVMVONw==","shasum":"92fe94cdf719eb0107e809c3233c70a60fb53b68","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatbCRA9TVsSAnZWagAAfoIP/0cXFCRLE+3hwUrn8zzc\ngJ0FjWaUIQddXA5qPqW0LD284P3ct9dfUD62+OrTVU+iJs51E+WKmHNOMwV+\nDLxf37k44AXhMNXtaB3zIa5gu9M5CiMsqhtG7EpBN6whb/F/jaHFUrG+Asjy\n4bI0RZP+iBACsLPRbVEZCRmKMga9mOBzQbcu01skP2PaIlYWW/Rwpy8oU2nK\nKqUC5NYUGXAMzhpTAXlPDIDgIhytQqYAe/PjnCiF8fgvEdeh9O0eiLtmpIIv\n+OPqyw4wh6wo2T+BLruEMf5OnRCV41Wxpnt0iuksM+xWGX3G4PNp84cOf1sc\nR2h+AgdVae7jmOsLxdsmcwof606eyYzUjT0d0CBErag3Q3Xn3FR1nAtQ0ZqC\nBtpH5mrPn8CjpsEYWC0J8qu6LkZV4g9BIDRzoDdakSmyRsJ45GkoWMhOx8BN\ndM6wxZaTLFAVAEgOIyDSw3e3Ukbl8GQkPCQUcRFRDErgmD1+SRMyGhpS4dYF\nxnfwIkB//6o8NdmnCDm0QHCa0cyd0n1a9Zs4/JWMGfLWcVpx40Wg+vTvGR9+\neX+cB7j58wkXINFHEno6VUu/xBi/FFzwureCyvyhDm6eDfSC1cga6ss1hHxt\nN8ecNTCN0YOhUiuova5VoOeUmECAcd+Lj21pd7P2ITSA2kGcMeLjWA0UBQhl\nmsp1\r\n=eKEu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdNsTfC5pDR2I6mrbwRHA5M5dOVfDWOj74W0Klr/acgAIhAOKhBH4QtBXeZJZTKw2T3yNzcnf/JdbIW1MDPPdLvFA+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.a2f046f5.0_1583197018722_0.4894230060318243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-textfield":"0.14.0-canary.024f371a.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KUrJIfRjQHz/XVj3/iQU7wbF1rTgyuJTaiwaWBuIB6BllcpHfc2+KO0YhjM9Kwudxw2awvGkMMwWZvWOgWGNDw==","shasum":"31b74165a95ec06567e782612be28e86530be17d","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLrCRA9TVsSAnZWagAAt+oP/jyQnGTSpz6oHcRy9SDC\nma571zzI9f3BQSL4AV74RDodu3nZN0XW2LQYeJ3UvJGfnT65Mq65haLkYRSF\nazz08T/Sd9HHDrU3T8yCKU7OMc3462dyeVy2+o4ACQwE4+evwCZzDXB3Sm/x\npVc1hISownq2e2cQYvKAunusWJbJvV/AdBNk0nTlBMCmpOEFUqYu6hMngOzS\nHBCQRGGPDAY7cVFtcyFRU9wXEgNZxR473skMXMZ13IFfh0dAfyh6nh7cid6B\nsUA+Rshjvm0cmrmj7njbnQetAisShKLvq+0ITWGMsdt9txQR06Sm4qLBtDt+\nbmuSwZvlNY9eqP5Hbncr67cK4WcNHs5cIjz9e8xDniVuLw0nuoJJZsk/0q/z\nYrUz2dPY8hzZaPLzZpyvyuZbQ/xsZCsFCv5DEIP90goncnUD6rM2J8co91an\nUtcLWYB5CC/BU+uCOBUIbKbCuIWePtSGcuf9/hQpIQ055VLsCZCvQwcLD4sd\njIGvOUSdOU0E+WUe7mk29r2uNh4583fMW0jg/oj8AXM9dp0Ddc4qIDePRPUy\nNn3pSzg6Il8MlF5o+bumNGZvmMZp2mTYpdFWDxHFnfkKvW+QHZrc5gl/WsZU\nGpUHfXGGaGF5FrJ/qkjtsFEXgHa2UL04mNZMIHot3gslgZtEaf9egyQP+DRX\nZp0q\r\n=QPcc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMj690AVCMG+Z0BuqkVXmctcbed1a6LHNR6Le+sVK4qgIhAN0Dtk0zlRNddfs62mPHBCK1NE3ZlCgVi2cLIayGz2NM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.024f371a.0_1583198955533_0.5581341584295927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-textfield":"0.14.0-canary.2f164110.0","@material/textfield":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WtNLg+5Bc+in9kQhhW+bB96iFwKSbcB7yYjN6Bf4oLRH4fygE4FdFYoHMCez+0JMQ0s91nXhVZKtStG+NxGSJA==","shasum":"a3fb23ac903b15abe706a1ecfd9faa6a528c836c","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1PCRA9TVsSAnZWagAAwMcP/AsOXQ5q8PVOBVbkQga7\nCkskxUeM0VIs6M5l6oyH0ILQ0sNUTwaMsnTFbBIxwuglByLvwgbY+/MYaj8e\n9i7G1RjDFdddcixIrdHJGdySB0Imao5ukCQSH/wDpt8qumo9mcin3jG9pI0R\nYLGOjEgLpMpUNG4nlqiME4m5SCj+CiaL6WZHEF3X3ChCLaWf5qDJG5fGAIBH\n5FUI9TvSYHVuymp71Kn6Kb2B55BCx0AsD6fvJMZpp8+wLcrGgS41Q3Rldk7o\ng5iVKDSJatLofbfwe0GhQFJACjUesfKIOWXSexPFYZDdHSe5JObcnyXG5Z0+\nnmJJZRSD6IoCvjJiEOxJPjqvwnDn3Eu7UBmUX/570GbhVpxbXod1FjaZjkEo\nNmuj6Oxvxk52tbUxE7nc4r99YuVVPbN12wA0kp80Am4Gq5U3aBdMjwHJtBrQ\nm7sClZ9o5TavIvaDBa22vMiGFzJ2fW5KffJHd+qvWc5tPp+e2Ux4tgFGF+VX\nO5Hdx8s60E3QToe9z/h/Eoj2tU8RBXcaCWVNrwAOxRlmNTLzPD8HDN+H6N7F\n4KuiH8GuJeWhLxKUmj/ez2MaajDaTd6hGg24LEM8fEPFuI6T3YsF8/p1dJpt\nUhHTodrrjGLFCzhzDwDqy4psfEsOHwesCLKhYu5S9au05hWCNeWVZM+b5XWJ\nwVzd\r\n=Ohph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFncb7wEfpZJ8jS0c2hiquYIEfUkEmLrWSXlLYJIvaG+AiB4dMmWQwR05WEVbcnZ8VKldy3myoJ0+K/bifyeraiyMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.2f164110.0_1583271246706_0.08139660046363217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-textfield":"0.14.0-canary.edd465cd.0","@material/textfield":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hifUklqpn8YTh8o+8sy8woarCEjPrTZIpVz1whLCcZPp5KbwHqLk/AcF13tXSe8/a8F3JCSm5r43w8i56Ha6lA==","shasum":"113f97c6599c81a4c1622d8f2bc23c86b27c0b26","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIWCRA9TVsSAnZWagAAY/sP/1BTwIdVEqFN3Btwo5S3\n48Y7Ktjn/7yHzmC/fBmre6JO6NvsJx/TfWiR+JruLEepNNUGBUhfhlYCI7p+\nIG83TWTIP5oj+lT8QCI2gsgBZxfL3C745ZKREnb0qQ/HrqFOUgXmSn8nsRXc\nerZww1p2Ce5gNRqZU7X3uEs2UM5nuK0FXFsRb3iHVQXVi3UadjP1xyZKMkqk\nwCsirV+blDW0c2r9ysS6jcYI2XTQ2ALHDGUwX0nyXDQrdvtJwPhRMnDOpovf\n/7NR39S8PRd7SR+CpQgiz6HQpzyuVHq3gZpz3IHD8bdxkIwJxg/wFiYNlwvU\n4MR1OmL72udOYcTVW264BSMIZr+kp+Ynk+kRwyAkftCzfceNqC9E4eCeO8wf\n8hB2FsUCjKWN+RjRRTXhZHZHxKW4CuKt7d9y5f3IzrzEMSJSuxdgS5yZCAWd\n2siCuL76P3xss5iYuFE6EZ5kMHTMI3MoHirC4hfdJKvUyYFL6kCyqEdLu7pH\nNcmk1PVGnxnz2b/vc3KjOuR/OmxUo2DJIPoak0spO3uZIQ1dx4Oy81tf1JsQ\npUER+tI69D4/LOegfFqRn4LAg/OP9FxLbUqKGhVtOZDHas2/vE67uht5q76/\nIrQrNwI5sFsC1WAf4I5a+UHkJrjVL+sQEYJEfZIKdLn1SbcanuRiS0sNlIY0\nrXGo\r\n=zINk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq/rxKiZIj9ib2IYBD1wEIgYhF0VyaA/RtAYklu8QdSAIhAI2Gk698g4QeX3G7euafCOGXlkGbleyyZuT92137vIW4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.edd465cd.0_1583280662047_0.4016052350537511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-textfield":"0.14.0-canary.2b02d017.0","@material/textfield":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MCoi2FxIUp2d5M6UGuemSP76wFttfpoH3urMi0/lH7S+UL2MboWzqFvR2Mlv8f+5iYHqceMybCheSNl6i3DkOQ==","shasum":"352f945f2cbb90fb70a97c015dd4c836159f822b","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1TCRA9TVsSAnZWagAAaYYP/1ANbD6nTJzAw36Dp7wS\nz09lGr6pfrzGPWdWyq4vLhUbjwokVi9eIui5/gR2dEDpqPM6sF3tr1NTAYvy\nOwpgPh5aJW8X6YptpjkMJ+V03jOn7ZmNLaJM2R+OFmjXxFt0O5V5rGNcu0g/\nkTlpJ+tnTekKJ7cwzNRJkauKuPyDdpRFLAWAPi3daNojDDwVIAcEe9IRcEpt\naVQuo+yj/0vkmJpiHuOZKdQ1qr61QWwxIBS9bCEfG9vBw4L2qMhFBodVNGzV\nBpR1Lul9MjvQedxcqcpBpaKxckrdvipCJeAFa58twKi9ulRHnLC65t+23jLe\noLYwK2SOPpdG4a4JF/yPCSnWPaEI5dxdppEs8JZB+Sd02Sgy9WipktNZ+uU0\nkILj4jTVVK9b6ELzgAwhqZLXQ0HdzLWy62nXb3OU3gzIjOEQOI/t+sZbQiP0\nYrB5ErAIPO8OCsjjwulL9t1n286mGu+Dqr/Oj4Gomu8cgnDj8iAnUknFP3d8\nr9Vp1OGBr9Sb41NvKmnTqE1t14/ZREf953iJ8Qzt9pr/LlMr6nzt9DmVf6Ru\nxIETdgvddi/zfzEDKtzmknCpwnNXFwZo2jmC4L5022fx9fFZpanZaPtS+w7J\nlQIDEHY4fxOCmHFYPiMgrTd4bemh9QwIHaN+9JVUYE5MtQWjY1DNAOGE/88a\nJalw\r\n=ks6b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ3TslL93O5oWy9IOuJQ4tX5msiOewgFI1yH4aSyh4FgIgHkrkQVUsXpXUuu15//DyzupUCscakad0FC0lvPLCGWU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.2b02d017.0_1583353171297_0.016663271818973868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-textfield":"0.14.0-canary.cbdfe453.0","@material/textfield":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4RmRrAe6iCjsJDs4cW184cEiJw5Y/yszffLpkC6glyqIkWTKd8pS8L1F9nwS8JTPlODKj8ZHA3JJ1hN7w5XEVQ==","shasum":"b9205edd6a37829e19e2217c86ed28d3177859a3","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFaCRA9TVsSAnZWagAAdo8P/jRMLcdB/YUYlaWG4RMW\nC0V9dPddbsYqe44XST2WWVF9ZDCOWX5YYcoau0EGXi95JxGaNmJKsIm6R9Xh\nlhoVwzN8L475zttYT8kTSdk2IUowkNZihJEy5J8F11FS1N3cA0IOBkvvweW5\nCHW3a/xkEDTyi9Ol2rpqNdVfGG01hOHVTJwENoTJ0f93usSVO4wWenM7vFWn\nGGH7drAjLxsa9kqRqOmxPHZ9WfyV1ddlNK7iVtaOo3uJqR3DV3QvL5Ou6vnI\n5cEOtTgG1t2iqpywnbhA0Hp27FAY4e56rVnaCfb+rBsL1RYNqZufbpivJpA1\ndthuC6dfvL+NmNSfK83tD+cbaShjCnw1PqD53i5eUN8AMqbpUSsTE8jEILgH\n2XWCn37hWciUpUUtAd5yDsY4+FoTKbGGMaZ6iox9jxGhXJQ+AHnuSOLUoz52\nReakLQmEGLDDLx8a35J00Ii+fp4vrWIqCV76vHsOu0W43qiSxVoYDftLtkDT\nWdEnshjrmX1Wregw+UGSToPNQZOawLL8qjpATLeNkE+iJCd1rh/Bze+tRB1J\n/D4HXWlwPSCV3odVkAUqw4rBDqLtnZoOaih49LUOSiXjCY6LYu2nU1D/45aJ\nwrc+xlqm4aq6l9RjSYHZhhR/jHsIstvC1O6oGb6fhTzh8UKC9ra0tGNq6d7J\nWEYW\r\n=4aY9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMnYbxbFfz9up1PywV/BsvKg2gRCuySxcQ6W9/cqURVAiBVbGSpyP5NgPugsPBhiSt/wLTcCGaNw+33bra/Dv42CQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.cbdfe453.0_1583358297992_0.9062406514276347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-textfield":"0.14.0-canary.02aa8a98.0","@material/textfield":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L0g3aOJYXfAgW8Q20ZZ/VpSfptJxV8tU3GD3qcmr9FCv2MreTOCS0w4Pwccc/2HcCIGvsf7oTLnyRW85rptjJA==","shasum":"e1e4ad8c3363a8d174f1d06cfb15769c7de23fed","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":204491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtR4CRA9TVsSAnZWagAAKkkP/2VBZ3YLgOD8MAiorYGK\nOkJFOPsZBOCTNj/DjnVqRbosN8iEXeweCrhkWLZu2BWUHmnC6Iv6voic/eRK\nMUBNj+CsV2nBFmbZNnzU4HP6s3udNVGAjj+ihGfoVJvLLBrz/ne4DJXp3MjB\nTpc/x1WIZ18wLPmzS0gyys0AF/uAbV/bRxviC0J6GptAIu7BK24caaXf4A1N\n9naZ4tchMqu3wX1z+QqyA0aVH3YnmBtKOyGjp4zFuE8KC4kg2yPuLB/ykKYR\n2X4/RYH6OthSa9okudig3a1xcuQBC6AznW/wzBYaaNHhmjkTbp0HRYgWkNY0\np9Y7SsXPkI5EoPWOY3PSER/YAFYHm05zyiMOkz0DyNO1Qg7u5QiGD20WSmOc\ndQXLRSHWMxhNTuKSUEInZF29uf2yQZQ255uDLBequmMdvGP7LeRhyffxxgR8\nxlHkuIMRVok1hktW2XiG7SUIdhnGOEZLhqNZE/3to1aE5pdYeIVmTNzAyCvE\nlW5p0pyKKZTsK3gTDoy44V29fOwbFGKm+Lh9qFU4yJU6ZbrDrgnZKgm9mOcR\nuzPc1VxldGfw+cIPxi3aGx2k+C1yPEn4AA2DIOcPQ259IUfkul1doo0nu6th\nyF30ENdc+zzSNBV/DiNzzm2fqxe35T/t2ufeRcbzLNIaGd1b4m3vLfMKXtoM\nLoTh\r\n=wJdL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1CUGsgEPYCVeRxLX7fxLzlMsXqJNQzq69+Qua5WsG9AiEAuEk2ucJspreArdbB0qd/bQV+icTHMIrZ1v1fCt05JNA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.02aa8a98.0_1583535223706_0.20176873025374986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-textfield":"0.14.0-canary.7cd5aad6.0","@material/textfield":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ew//cDZ5pgGEe1WC9HxC3gJPzncv8CjyUgoCyFHEC0S1XmNrcFrInZtiQrnI4fkdN1oESovKh1Hi+5/8o7bygw==","shasum":"00b0c2ba879be800fbf35e66e07112b661e9a5c4","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8/CRA9TVsSAnZWagAAZlEQAKL1aLXcRXPcLq98QuQq\nxD474hfBFo6NoVmbvuWLBuO+hWGKw1Ig1TIQR0P020LWCJNQc/fSrx6LpfLP\nkE35+MzBuSF4mMRcmJhYcaHoZparoeQ9LPfRSYCE2PVQmwK+5b7ulMAE6GxI\nOuUE0HAoAb8oDJq9OWCrSIP7sEIliObIurofPlRPeeKV05qx+cGgdKDwzHU7\n+ogWNJmH3pbjEjy4JsjQ678US5Cdqwcs5pr6xU/2TjPL3KINLd1j+w2dRzGt\nVjV9B+odErA7OBAI0JZ4kY9zWieZlZXTbAVspYBkTqb7rZybC6u+N+kXbnlM\nWx79GrlTHvr3lvEyxgZtBaB+jwRLrRtAYgpcQQWiuYoCUGKNUXuGHDt8rBgB\n25yNmISbqc+eF6aty87E/IMfFAertG7mpvFON79EsFN93V2RdoS2y56mMQQx\njDDBZHrBzvM7/zBZ5FEDhTCGSffjiQ6z53m57u76mHdToHgSSzuu7fjF36Q9\nnmgwpK5nQVYEYa2Q6IpLMc10Eipl+vrYYTPkxAgaUvKQHw+fb61236IUbCtg\nSi+LnS8GtfYmHLqyb2tbSdFhVY7rz+tMbnKN374MJXquVgTFDA2qX2Zjj8AB\nH9xhAUUFpHd/Ctgxj5cP4TLiK/fTNQGcB5qGufj4njfGujg2mN9KGR+ntjYu\n0XlQ\r\n=qKQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDauaYYOC4UxDHKLR3N2Rqd8S6MvB1ssxV/VilrnqJPAIhAIFpjBvKoqqmkrSf4huYgHl5gXfkgtud+PniOGhsyMX6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.7cd5aad6.0_1583796030801_0.8444141064825847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-textfield":"0.14.0-canary.3a79dfa6.0","@material/textfield":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-E33cJCZyciUGUVEk+2YOEB8e2ZIrC5H4IxPUPPagYKWyUhaFtr3eRFPtxhSBlKjEAajy6/CNStr9uiBz9hLB7A==","shasum":"0cb979ffa348c824852f3812d311b6d670e31e03","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHiCRA9TVsSAnZWagAAkSkP/AmZUgXJmlDsaTYEBXGf\nYJE+arwTSWX+Bz6GoPC755v2dKKmkEgxtrS9YFPn3lKMrx4o6Lsllgsb0yiQ\nST+cImNY+lT64b/Ko7W5yoSKNgHGj9rEMSzZlma/FKqYtEt0BOoU4m885oOW\nNnCPLm6Otuozwtlt/YDK0X1V+0s4HsNXllU998TC1ll/VLKbkZsUYO2MV8nS\n2dwOZcBB9NCetzraSkmKxT7QF5kbgHXJUOCV+fjwaR/rqTsvAvm568vGDjWw\n9deVlLbqAPV/TpnV09x6c4YIzgqJESVqOvwQovuyeuo/MD4QZ94RUksn0KZ4\nNkE95cA0pgz54D7vb11M8nRL7Dkc28k5Aixz/hItQ7L/312NusMvmsIAtswi\nERFXOGlTKPJPY6KXIdetqVstaSQy+Z0fX6VCVjlTyIdTxgbe/jPAd0n7YCMd\nsygykZEIVA3IVA6FfKN7XSpqtzc8tVI1RFC+zvS/3vG52DhDu0q42V3E3fE0\nmZLI38TQNXOBOCiVvwJPekUCHUH7hPwSldgYauRraTbPZlie9oQzVi+YhbOS\nVVw6G6fovNpXE5pdhUlYUxC1kzuLDW30qXbHPFO3ryz8L5u21Lic1tWn1Eic\nhngTSLkh9lxmnB5zbgj9u1PHcbRPe5ugECeJGNr7eujeV+EnM6Wqs9rIesRp\nbpqg\r\n=5B9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbgzsRDUkZ2YdiJ/xzeiL90Juog0IBytpZ8Ev/xYywIAiBWW5VPBKH1Rn9F3e9yjyTZVjNRfmF7JDddfbSmaiVUsQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.3a79dfa6.0_1583808994370_0.45335157339312837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-textfield":"0.14.0-canary.22e0f5c9.0","@material/textfield":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xxgcmz4XWSqGNBSAtvDU7lqS/lVsZLLPw3Okq9NXv80ub5XH8yXCGhrXWtJGME+TjFQDhDJm/bqgYAaiBl847w==","shasum":"cd4997f793dc91e64b4ea78608052db87493ada8","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLTCRA9TVsSAnZWagAAfKcP/0YgfhC79qTQSS+XIb6W\nu3myATG8SD8OXF00dZ9zxnYn9OBbVngRdlexo4vQcrGwZjBUPaaZ0GxCET2e\nJ47bmI2AtF7cizLF6jXQjDSyqBDdc0sVIzA5Ib6Vvs/qa9O8nJ8I6XG+Hgdy\nvn1Ppf/QBomor66L2+DrLo2erzOpRx9Rhth6uuDOa3TBLeyEdrbaKodHumsh\n86g1b4OqJtN+QtumMuMNt17k+eaODlhWTlYYJL50Xld2MYLM40JNp/nOfgur\nXSp9twaF12cbuYl9MjZKjf8Kf+Z60ilhfZlsWYsS1kk9JFI9VioBrq7ckAXy\nzXDqLwjZEG8Xelq3/15G15/AwmVj0c9Mhcpmd12uISNWzi92e8zxWq0/l2ib\nzjohtAQLp+i4z2vz3S5f5EYC7Lz8d5MtQNHhBEcZnz/XkT5E5yespy5fkCIw\nT5Rqaor31wkdeOzhvwYI3LCfN38AHDEma+T3qpMgMLRWma6/sB87lxzPG4FP\n7g95+qYjDcHwI5s2vINrprr9qSSJDDWN5ydt8Z46ZMAHTSZxHirNNx7clFPP\nscAKM7UwJGmfIeUUhTdf0jXYp7kaipH/I6oS3HwpEp9jZRzJnWXK/17pt72O\n0/tprXLIMsRso7tbC+cJkYtoC1xBefePT/kDiUTSbPL54k/c/1CSpJP4//5e\nz+nX\r\n=DbfQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDenjYmh3J8YqmzyxFfnA7JKLE4a0hS3E8xH1WRam8PiAiBFst3qqoXTbIWbZ7bXeO6FGYTIP74BL3nroDWL3AAR7w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.22e0f5c9.0_1583809234841_0.4091077393700302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-textfield":"0.14.0-canary.f23a1d1b.0","@material/textfield":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aDVATyl2KCypfF3CiS/sZMIKkQR9S751ARRssi2XHQbMsI0iDAjW7/4WiwgcHA9kLkK3ie+CZr5RFh4F43Ou+A==","shasum":"ee22d582eb76d011ca529f32b329b53d44640e4a","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8UCRA9TVsSAnZWagAArBQP/1u6XCEDM64gMZT7t9O/\nPWhFZ22C+aQAgK1021TnyHrBm4nQ6iuduyzk1YSuBmyM0tJV/6xKAaN+Um/2\nSCRs2PaQVntAWrlROUvEhJSMNEQvdhFgtZ6SprkdoDEmqfhvvbY6CXMnCAzy\nv//+ab1BCwRv84eU1QT7qW8ceitknPsUzp11ZDa4wuU8bGDuna0WYiLwF0kl\nuq6U1ETiXVJxrDO/TkBgQScn905ob5oQZovISucIgxGuNgJC+rPAZGIBdyf7\nzzlCMyKLXQCgJtI2yK0KsjlJye1HzVGFJ8KSPy6NQ3kHY9QRgX7YPU46O16K\nj5unNYYKGs/ZVJD0Z2kzDU43YIvsunjTjmCvL0ieQBbVbHYg4o21WZ+mKW3P\nlHnWimGl/vFcsyHifWLSSP1kURMRLpkGcG/x0rcW5jgYXNd5uTm35+5hr6CO\nRO+DVYqfdR7OW+2EGfGT5vpi4BmC0xsoUzWxWZN8tG5yzAvVDxM4Zf/ybEsb\nxj1Tk21SnWHbDwfA8S68S29/jCyXPIUI24bjvVAqf8U+XZnnG3i1yVEpWC2+\nQ8m37nUZ09IktMSdfsx3rsQE6dcO4O7NtATiH7U6SB6atH6J4gaQVG5KhI/b\nz9AMNhJ8kXqmzllBWUV/S1wlLTnORIZw59bZj/pbEfktFvE1Qi+nDZwVO6ze\nMHNp\r\n=UHsx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvZ4Kz9yqoQWl7SgO3O3YYaiYGgmdlJpeYUuQRDFxjJgIhAL6Uh3LhPWy48demTkUutmaoNfN77IkEZFzaQbNEz5qS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.f23a1d1b.0_1583873812282_0.907088415820194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-textfield":"0.14.0-canary.34b2d69a.0","@material/textfield":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WlXFFaCO1bB+5wzNs7f+AIWFNWJPASkZ4GBx2dfGRstvYzVhauq3lGtIgc8g5P/l7C71q/7ru2cU0fC5YHeK0Q==","shasum":"d69106a85155f224d60619831209488773f31524","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANZCRA9TVsSAnZWagAAIs4P/22ofUqRHreE0JAJoZ/Q\nG0e9GSGCiPJrQ/af2zXv4Ch/kHnLF2IU67Ev063OO1rWCgqmbYP5wy5xnxb0\n5394kwSTBf/KmKFuzsYZG6bZGPpmJEuK+FurhO4+8pIfI9LDXMZ9Sdy2SPtc\nx6YqORAY1c9LXx25aK/vP/euzvsPNAbezBqpPyxLIiLrieA3nK4/O0rbecQa\nLlR2tgQqlcHoumBUj0t2gA4R7Lyi9S0kjyydVncNukvpid33eYEcliIRCdu/\nmXw6AyjDsopijlOKFyclIrYI22ILTlhNBmjhH86aHYzSBwjDNWVe2pEzQ4vB\nRxfdK5tD6SE5fEBGztFpD453wJlC6S5XbbC7Yl09pX0POeGJveaHvVY0BWke\nHwUYNV6mS40du069wMbtNrrdOd0EgWic0nlJHMbhdYMs6ziXizSi/1nFEldV\nXxFdJ/spRZeObB4p/3Zb5I07V73L0oUrkjPg2842oZabfEWpH4Sq/OE1+fRR\n4hYjyQF3L4ClTZfngEeY4PXJ7rKgHYVYn6agL/yqIBvIvseQWkBf00/PM6xI\nFXTByGb4wMf9a1r/oACX5ESOsfZ92xhx4S1xPGa5kgV2x5neLQw5woV0WExp\nci2lktf9+20mbYUkHdfUZGwwhdKh+KtVJS/bVMAe/7GM/G11K5Zupyzgm1va\nrz66\r\n=q7TZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPo4dRetj4KXN9WwRlFCcH28y+VfQyDX2SS3xcE+3L5AiEA1Q0EfT0K/VIouk1EXCn+5RbVm3R5Otllj96DBEB4Hy8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.34b2d69a.0_1583874905455_0.8377267481455224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-textfield":"0.14.0-canary.dc04abe1.0","@material/textfield":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0bZEfYNy5M2Y/iZY1GA0t9mGbpnqfa3tELwDU8Hc3lhsGxf42wdjMjA2nwdKZKfjUEcXTTBJvk+bl9srHG6b6g==","shasum":"8313aedd5540e9f096973db27406ac05a66eb2ac","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA59CRA9TVsSAnZWagAAnN4P/Rfj23lMQzGlOspHJFy4\nyIiVnC9KJ2qxmox/yOlyar0Pho/0YYg+lSWXnfThdQ0RC+FpeUE6198H8Hn+\nQnKCpg7E4gA3PCZu8t/ypRtXf2jNxH9q/mkrsaB39uhDURxIZnivLWKZW5i2\nac/6V+VBa/CffO5SQIvConxKYeGLK153EGAZ0mE2vn+kgppNGn9gLJp29QcA\nkLSpkWPh+U11OfC4SLwVXQHG4N+XjerhX7uE7pGG/+BMkGDvrPZXjz9cG/ha\nY+7XPjQMnXpnGo4FKtUsl9ttOuRIL34nYJzTugeCSiIbndOo2fnhWtK9ldms\nTuaaKbw/EITFRyDj3P1z4ic9GvZvHquymB2bbt3HgeEfmOjkdbdeLGH3KD+9\n9tk8np1PZ1idziuHt6CwfkmyeiQUg5f9dUkcGGiUAjiemt6iRvxlLEbLYc5O\n81+ysTV6V2Tv1lMvFShF6jHrNQtHyZxUqNoznO6tKGKKGIxhEwQkQDtQKIg8\nhhEe8sAvW7RRn4uko/5fm1KbLMQEt4tS3G2zBxW1nBGsv03K+vYC0a+YdtTB\nbfaxGY/JMZnJ3rtPwCKFK3coopEKlr+VT+MeIQheLuALspKJIVe8eFKQvj4M\nWFpmRS7Vmz4lej1YLuD4JloZejSVInE0uSMbcVJOjurhH2WUbGh347vR82an\nbQZb\r\n=p1ga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkCxAkM7uls+QyagpmRP36q1JJhuY8NeZfU5mnRnuRyAIhAJytD09fnHElL9kKe3+m9zfWenJnQwIP+Ql3+iLbmKUl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.dc04abe1.0_1583877757521_0.47770510303891967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-textfield":"0.14.0-canary.04ccbc88.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-unKzW47/bSGIiHBGR5Zxd3elVgnu8P+e1ad1JadPOdHauldFpOLNVNEx53ZmWSFYW1LziooBftmFII+8cBRLAA==","shasum":"29d18bd340399df926034d271e6c3de0f700d49f","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":204632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDJACRA9TVsSAnZWagAAPRIP+QFAJUQBKW7oJINmVYWP\n7+FmZsg3MpM2hO413sT5GU6Xbyk6C2i+evLNbRXEIWxsjH/Oq/HH0z1lMQBn\n+BVz8FMtqncJxCE/8cOCFdYLW4+4Ynh69ABVzG8jKdHli1jAdyWZoTcfPncl\nYx43HvfgjAAcLzTkStgNekdGXB/Vy44sp4HO3h33+AQSaH314T0YWcokdbeB\ndGJ1FG+VtN6j4PKoGk1r4mWwKhc3YZrfqT4eodaWTZatd2kX5FFrI8nKFS1K\npghtZ+tegVn8C8xJF8TBzjyZ6ef2ketCAOvt+1JSEvD4uwNcfViALDG3+Dfi\nb9ZfNTF/Ha0E0Ir9/xzFDetJWR6aF8QS5eRvLCR2I2iKesBVudrVoxwf9tIO\n2i+Ns8cxl4nYOVtaZFgyCxOCEufZZ4sjwG5B7KTFpENzoMCXZbuC1rRPeuDo\nVtLhpYtEewPsGdI0vCE338x1CdepsU0KJWUL2Jb94PB1jYDZSNMN9N2y/zB2\njmSPacMBvBKqbtyA/lhU1oQTybHa/88RoeB6WvN4qhMVhbreXOyst3xM8ZD1\nK6jnl+YtaTK4DxSatGMDgcJVB3GZrPgy7XZQ9OG5uUNXpuzpsIAM4C2f8UOF\njO2lritnIjz+LDteNnnrpQXEOeTMXICXd3/yJh3bVK6jvnaNUX+1WAHelZHz\nZBC7\r\n=BKOR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUcFF73Bjs8AbEks4++i5+tF1q+MNfyl91EztXPcTpQAiEA/dA68sPmQ1yQ0hbvXcZhKgjeL7eu9UMammkfRaXjbnk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.04ccbc88.0_1583886911921_0.23875338251629508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-textfield":"0.14.0-canary.55338c25.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-M0Aw71rQ9jgmgLJVjLVrSbDqsZLYyfqLdHF84p02bUMeAD0u3qCIsyFxlAp6f1yRj8rxJXEJuqpTPVpmFunsqg==","shasum":"601a1d41a3198e23aab9e344376c3e1d640a13e0","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":204653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXUCRA9TVsSAnZWagAA28YP/RZP/QhJiqHMJdLvlPdR\nABXuVUlE95/2IxAWcgGVZQ16rJAu7jsuPNSJsB4xdCxD3mOOwsKmR4QYG0SO\nX+wUhT7MEi1lN9ZBTW+v105w7URy2ugucwrL18NnK3Q4hrOvn/QL0mIib8Dx\nq8d9h8+oTf/X4wyTooh5Egz84At2A+616eJ9d3omDaPqc8Qsc4oSivB8Hbv5\ndZfXrEwNm9/tt8564RN+3GQwN8Aoo3C5NRu/FNgPgnHwvblP2PJIlU+ArOZd\nOpU+xohGOcGPJWLZ2c/2vWLyiEe6o8LpT/ine8BY3NiqhgeRfdMe7FOE8+5e\nBRVj9uFGb1vnGDUIWfH3d3TRQWSjiskuXC45y7vHo1Q6ZyMQc78+4uKVk/xL\nd5aT5oVKgcWwtnZeJZjpABt50MVbIPzi1h4Gq94hOrAP5S6CdqC9FGXq90Qm\ne7hPLoeGrMP16lLD0A6K9P7SmbnmyGvIMddb2MsvL8K2hask9njD9BLvWUzr\noLAe+zPhX+81w8aifB1JO5bw8mHFDJpZ1ZxtNd9PO1L6/oNppns384VrMSDr\nki0+ddqpoFYY2NnH/YFV2Yn4mo31ehg9TeaOABBxCV2NPS107govJ7/xIeso\nyBbfiG+6e4zJgjNA4CNnNQ2j5/ezbfAdGoSjIIZ8yXZ34yGFz7pUciSOhZtV\npwfm\r\n=wci4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmckG9gb8TA9Z3remF+JHp+Wdbqb8gJTzme8x26oAH/AIgFhbruCmkTkKRGbomIzOBuhYoED2HhSHaK+IBux6NVqs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.55338c25.0_1583908307732_0.41535418006817104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-textfield":"0.14.0-canary.b7e388f3.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PorsycpqhSH9VM2rqToXi+HoUB8DI0CQmfoDqHe/ydtLTNNUSMlZtSUicpuOWqH5mbLlx1YDCXMbbLL9Ne4R0w==","shasum":"ab28a33c172246c5d261417f5ce1f4b7af8cc4b6","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":204653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUf0CRA9TVsSAnZWagAAkh0P/jcryPZ6UIkDDr+qDu8r\nWW9jGikbOuiPfXkI9ONAkIqNFC0i43I5UDXKLBYbksiOiLYI++T/IJHd0GUq\nUQFBYGfsSgLhfKIkmEbKiYLh4IACKR6cbg/YVDpM7VO8wUbmAsVIyZSFGpEF\nqcldfoTMJRm23IoezLj9mA5AKXfAcg+8E0UTRKgE3dlGuAEKOwlOXAHXSvTX\n7nviDJNDxH8wtFEJzwD2aVj6fQHqkslcIUCCxGLCYw+XyJVDO3KzX+gSsLXx\no1BZHBXOw/5mZWhxTJwAYkujStUKmXpZu+nKJq0lTzj29c+npALfUew5G7/s\nKEjw47B5NdwNoOmU5reGlBNhvrziaP6dd0E9KPrOQK3aSOg7+3DTr4Q1P44Y\nrngPuNbRT6qHk4eG1oyeNlQbvsveWnvaRwRP4oapAtkqTbNu0kyhV65RgUAN\nUaENiPLhSBjsvbNQd7C+DjeJtxmOj2M/acaQylY4nuzITA9XlAYu8UESe9a2\nbEyYO8WRG+s8tAXHKTVjAsizJeaj1jNElI9mKlNttFjdH1i3vCVJ+o+YRtpL\nx6FfKQcXMfoBMsED0AJuI3z1DdqJK8+y6imBlGQ8uCl7gB8eY7PQC6O/Ca2+\nQUcQHjiT9kScms3i31GxW7FKzgSNLxL4033vs3zO2djkn0Mg5S79C3PNk3Hu\nF2pm\r\n=UDrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtFDNOI9aihJ/lHtKEb8uiaxRlGdMlXzeEY0THEYF3uAiBbWWjmXoZ2LkPX0PTmMt72WqHU3+1o+RYD4Cv2ibxUJw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.b7e388f3.0_1583958004613_0.2928625893445189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-textfield":"0.14.0-canary.b3211481.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-upi4Dh5+NrqgbMyJueQF/g8Nm1NejtN7l122vE12jdEFWA5/b0cu9BYwh/oZTLcge6FADxsivLk6ZWdv93POoA==","shasum":"cd6bf299b03ff0b524dc66a217637fc986567216","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":204653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjvCRA9TVsSAnZWagAAZg4P/1gV89O+KlGPL81TsotK\n6ZSHoVdjaPcoboiLocp9sqm9I4RJTaAZSl+gRT8KwQvoBCkQfgwnvAZ/Gy2l\nN/pxg6HbbLWsZt/KQ/kdaEIJ42ZDuz6DQb3jWRbAeLiCiJ7zkIe6SavqGYRx\nJaEpE3GAmdUYKlW3+4BTY4MGHkIRM/1TbP33nGHgFChJ94jVWMztqcEVdtNB\nst282BtxgdVhq34yUIRGN8g8834UiFamMzWvX9K5uYeJErkYA6SY5p7AFnbz\nqs6RAU+z/C8Gz+QLGWYHd/sXoociM78TVwmTc5kaVnOI1i1f2B5AkJq4twl2\n3l3abdg2rc5FZwVhFJzGCwwkTfxge6jnqJ6q8o/XQOw5gRlVwIBcjeW/EKba\nWmTIh6ThG9V951gLsP334M8psEkfeRm+6VczJvMF42JDl4Cd4e/3+naIe0Dw\ntV4N6LYG4xtnetttbTvpOngkJ+hjcLge1pmGxKF8HpTZZQQQ+6yx1N8W2/Q3\nw3xO71UztDCEGc8jF7wUHZVq/f6HFWYvidYD8MKUT/WdPfkSjRY+ukclhLE/\n6LfTC1Jael2VuAmMGPtGUaVdW1z7hSJwT6HvERLOEUJmO7vPzfM1HG87Y1AD\nsrNEqLQmQuHlA6dyQ0xAD7jaIhSMX1tW+mlMxKWbYlwPMR59jYjPd5SgsxZT\nBUSi\r\n=78W8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6QxhpVoW4/eDVbTOf+oolySrnJfP/782lK1kIxHnfEAiEA5JGNO7hsY21hIo+A0D4IL4XIr7zwgFKq8h+bnLcb7HI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.b3211481.0_1583958255165_0.18215968117560055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-textfield":"0.14.0-canary.0b5c7f23.0","@material/textfield":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/swZf6IyLwVV2WN7Qy4uVEJrQ988ppdGGAQtn+YZ0asery5XFyKDNAGFRXefyQX1MCNen7nLpmloW++OCFwmCg==","shasum":"627cc4f7c3b51090cfd1918b6d093e11f03f4873","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":204979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV4CCRA9TVsSAnZWagAAL6kP/314rF+r6hNgDxiBdr4g\nHUvwFURXQLuSJCZd4DR18yKotoSdMwSBw1uEY5/7rIRVd9CiGK3k/n4wOqXB\nHHOPQdc/ZA7BpBfL2QWEU5mF4YsKER5ti/HDPklSSTr63u67khPW6vP9xqE7\ndA5hZ+fwambfmg7xPsAYLFxVmTIVpKQhzbDYCoKhXtOovhhigMhFHvyWEyX9\nfSlu/mTuQDq+M9mX0CiraiTgoK3id3/fnc6JO6KgsjOHjLcqrWK6O9zDtNPr\nR4Q1mje9sdpBTPQ5CnTXoSZNld9f7NQHjjXfP/YLnTAlowmYyb4RUhBIIjiN\nIB0y1MMSSIkKfFx3YqvenismVPKCQnAimJbMh87vQfk8asXdJHoFU5rR4NT/\noaVbf9mA/tzQOc1psrSbE7qtqDD6MjvRKsZKMhVRrIfXL7YWqaEsxErlDW1B\nSfEkp3UvBjwlPaMwE+ZQGkHqtVv3BvOauHDNqPYa3Pxm1a/LSwi8lhjfTQhb\nfnPZlfqmvl4J0RiPlHph+1wA1Ec0tJKQX13wMC3MD+qJiJkSMzvUDs0AQoVR\n7I6qxVj6NpUNZUTi+6IsfE78vbFLf/b/k/UyZ1VTrqFUAQMjEUR06IM+/fVq\nJ0wfWJ9kLkJUG20KU0GjwZ25rGbALKF4SmUOfGA49wgeIjprS+8qbNDwMF6W\nWlk9\r\n=cvcG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK4VqxJNG97moX/JVtKy19L6M4O2wBjPpgSayJiAe78AIhAIgBIxwXuI0IQhWZkQOQQhot8UcRyKyNW6xqFUzdhgNK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.0b5c7f23.0_1583963650110_0.41240888658020913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-textfield":"0.14.0-canary.6c0f0b27.0","@material/textfield":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TO2OVFQBF+9NkOMvz2w1yKBrPvA+QRvRCKg0pvXVz3CrkmjazSh7Gdro+nBPqKNpf6U6iwsWXeXBCqaUuRW2GA==","shasum":"c7dbfc5586e5342f3228bc7094e710b50f587582","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":204979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbrCRA9TVsSAnZWagAAu3UQAI+cWz2wi7gfG7KWkCgZ\nC5SyjNccts4ZZEnTmASyTBS5erF+8DbEkpWFXt7bwAHGCIdK7+PUK7X4YoGB\nWJIZq7visUSkuYtMazps78aOzG24UaPDezaesCv7FwNIdPKEOxEBXX6LEb8Z\nB/hO06y4u3IDS2QxRq1euRJaAWV9v0mpaZvCwvfyu35KjG+Rlyq2BUYQxyHh\nTEbwKi+8r8E1poN89C2Em57zDWfALxfqBo0bRNIsiOiUjq0a03lcS1hwZeEA\nu5BK0u+S55X//SwOBEYS+/TRaeV0bx5gzF77noNDgebq7pa+Gv3DFq3b061E\ntl7Bnd3V3OvKmtDjI5dfGhgjyYJLvaWlXF1QSX4Smw1boR4jfMmcpPfubWOR\n44MhPWv2UWHWRw7I2s2PubeucIEPmdUVpIhBpuj019ZbEvUD+VQJ6Dve48Sd\n77x6pZi+tYUtg8VXtpBNPVwJLI6Ieik5KEZsSYCVUeMFohY6kitvibR3xNpz\nfRpho/dOXEylaJ5Eo5fTXABVTfRBkFhguFMYXiZROV/+L1vws3I8V+n3OiDx\nmOCypIBe+BHo7zFqZPTDE3m+tc5K9d57iYN+ARWCzl765KUnlMUWqvyW+h3m\n9qCBmaT+ju1S2DU3Wq5HJZlkpYecFmac6FPYcqRJE0+PQEUPpvYzuBTagN73\n22TW\r\n=4HGE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOYb9pNwLe/2s+dlL90YoPATTwEaYWjPEDCLIyTrjqkAIgDnpY9IjzGgSz85teZdWopCA/Q9OcF4sirz5ULwwkr6E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.6c0f0b27.0_1584047851317_0.6987409638574555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-textfield":"0.14.0-canary.b6c53425.0","@material/textfield":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7tvCRnRVL4+fUNG6/fwZWu91GKotqb6ZAjWzE0q/LuJCLcka7ZmcKOMjgO488afEWDgD1rlQlB/bMZDe98+54A==","shasum":"25927a0fa7aec6e5192034c0d22cdf9e121a0183","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":204979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sKCRA9TVsSAnZWagAArboP/RrKTXY8jlQqinMviwGt\nGWXgdnoV3iqo83CPYXcGmNKzSK9NyW2xHZEAKonG//J/zWZcfmqewBbvD22K\noJ+8/6HabQIHvaOo3Ozxh7FFrcoCjGMmcwauvvU0KTUmYnWkwRduVBnU64t7\nbpLEasF8Ksvgef8ORh//XMWQa2m8hN0xzbWUqYcKXjh3B91jXDwiuaovr/YV\nqsjj+nuvlxjAVrMKdZHgyW+Y9Ti5Ar1LmKwb9FB78TDZ0eNTVteB96CFZytz\nckkDUkfoM95FNDL4kLBY0yaWD5UekMzgy5MytNMAlDIQ/bObesCglbvJ6QYL\nJo45d9FvhULeVz2DiwDr3twAaNDSAF3/akLrm5JMNqpSvsHgUu4QmljtWC3J\nlqPYeeC1QgY/FwJf7XKr3NluyTKKo3f0g2Sqcn4Pl7z9J7IaBedtpvh75IWg\nO7TVENb5sSALrV1nW1j+Ko+/AvYysSTnZ7Tv2XQhuwqHz1DCW+AI48Mf8qdI\n75k9PwGaL6DsvKAXUVrTrn8QY2d5VoA8R5ZSMrFUg4YKQ3ejnFInt3As3EXG\nC2YZ0ymbYbqKudIXDw/GnCoKRkUq0FaOrilzpLeJSlpSI9Cv6+niZa1VZjCK\nrldAOnRh37YrZqm9xm6KjM/XUtff/yE/gETcfbw3cqmbrJLTXVZlsAMzZ9fR\njZz5\r\n=QKBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLdGKG6f73zqYLIqlcE2HHsn1x354p3hrfD2oCkD5S/AIhAJRcGlCzf1iC5KZEsbYzIQcRXObKPhzjxE/c01j5ir6j"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.b6c53425.0_1584118538251_0.6041068011784185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-textfield":"0.14.0-canary.306cabed.0","@material/textfield":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-y//eO2jdZEo+eweQgzOVoMnwdQfyWLgWCXpEqC1SWYSFUMXCaDFDev7WleplsLi00SstE0lUEwEjczBhzRK2oQ==","shasum":"5a6eaeff851036d18432501a267d00a4e7fd7a9c","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":204979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6JCRA9TVsSAnZWagAAbY8P/if8ULEhKWuzbq6rjEpI\nYQhXRn/oEnXCTGnKi6iyRrMNPfu5uAmUS/3a/B2ryQ0Hgkt+AdUxvz9DtOPm\nJIQeTrT07dKSQ1i1yeEirPvb9n4p51VcCTlBt8QX5t1rjuovj5emDvLlpL6J\n3pAKZpKGBzVOuefYi8Pswyof/o10GyPMQpL3WdJpnkUWE1hrXK8aPqPbaO4A\n1Q9SHOAlOxyMQU55QPimowkQ7530eeUEIPHAByfy+AmQYMhUFee/4y6ZewX9\nhuDkn2DbHZ1Dk5fwQHtWOqhdjsZT0N6I8jZw+lqm3S/fTjJqvDefEz6g+5ln\nXIm8vv3F5SW76j/kuC6t7qB7sF7xrImdwDqwwMpDpvF/NmXJsMVFTVkBVnbp\njVBIYA+XvGC2zlc3FnYHrKsCz7VU7TUbzTjaE2acGE2FwWpLdKZQCb8Z+ZB2\npxAt6OuWgDBhwcOj/oLI5vsMD6w86pvJZ5HVbMEYnLWARh23dCRP9l3UQn6x\nxPRlgIdgGK213UoaQ8UnO/j87AR44kgEgsLp0lE4Xt95MsxBfJfVI5nBvR/2\n1X6jQKXxXCEljJqLD/s4E4Pwc9J1dZh8aaFXvl9j3x6GtczPI/UZO1x4Dqtj\nV0IAmHuTi+Ftyv9J3AGSaWHM6EwCF8U/quF+BjRokFKq+u4aQg4qS2CR6X2j\n2rqG\r\n=dIuI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANdmRyUfhQiHj9OWljm2nUI2/PY9o/6EAPZWgQun5OGAiASfr1F3d/xEk6QAWcNSa8gWlzNOsAxwqjh3litaTUJ0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.306cabed.0_1584479881336_0.3147223617722599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-textfield":"0.14.0-canary.4e250cbc.0","@material/textfield":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Zps9nHMMadT0Gq+0kLJcjsbay4AT125T1tMUTPFYg6xiUC2gDL3OfuBQgacU+lx3l86nLuFaYj8MvgyTaCNFOA==","shasum":"a2ee1a42c1cab4b66aa70622c5de0994a88fd027","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/+CRA9TVsSAnZWagAAri0P/0ShWsoI8lWUJbhCJDA8\nLr5xYSbKPCGSv/tKKcsZ+0GFJKXJnkRGtQAEYTwCqQCzcO2iapdehkPUR/AO\nHpsLvOZrXXEuiBxNx6lneVlRgf8bVb9OkXd4C6rdZVk7JhJp8XX6dgpq6W/F\nBeD/1XeicIAAQO6E3FgFuM6kuGutVQ9Fq6CuDsUyPuFyrJxMvDiAexw91o4c\nSuRdv4w+QOmIa0g/QFbTXwUh/HdiZOZSGOvDyrnT8HFGKx6G3K91RA4jYPxK\nui31zaC1vUynPvqoLosKm9WI1O7cbEDh5ZlArFOdIrjkodrFYyiE2oortxVc\nSV+WB06YAU/Nn3qg+Kuul7KW6M3aDVfAXncFBDNOfikuvnWjKNRqgHvfeuq1\nTtoPTAoUP1iYfCUmrypqurVF2t2mUVrahvnewINPl6W/UxyzO6PrOHWL79kL\nBPmwwNgrMZey/4SzJmTcQMw5bKiIk8DhOtn9LscSTNiD3Hs0o4HH69UmGFK3\n9+Jo5+8WQY+UvkqX/jAy5X9EedH9kLO/gFs80EdMOArQYUelFQgrdShSlLMv\nH7712KEjM6eD+87v60wsE0a5RXKiyLk7X3BNAr/QJ8ixVriVoP/G9U0be6Ud\nSkwrl4jAxr01lu0OXvLOBVXh7vUkcVEpVkKn6IaVfZDGUasE5xn7MzwZDMxo\numNS\r\n=fHZb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVW7mwbuwTQkK+2Hgo/k/gEGtgBm8chjTyPp/uRy3CiAiAO9AnarJXhgkE6Wl9myIrQCG+wiXbKjbZuUk70Vmllwg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.4e250cbc.0_1584480253588_0.17452695497443593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-textfield":"0.14.0-canary.ff82d9ec.0","@material/textfield":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YUpK2SxFJsaVlUx5rNvb0OVvzDhz1WqZa2kktTY2oWNqPkhGVOFvXEjjovA3FE5nsiD5pv9LgGxMUJJllyaosQ==","shasum":"9ab2f78eb54de883a58ab52ad69c716d74df9084","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZOCRA9TVsSAnZWagAAgQ4P/1FNXCNtImBZ0CqtvEjY\nFCnpjxpIYqWEBQrWuVZcAVf1wDXHEf+FC9Pc0R/nLnmOYg9Byld5952/k5jo\ndN5en6uwMV+VAINQ3Y0VZ235NjBjYJrxUn0zK/R2O8vMUTxEdjPAbfX/G3tn\nUmgoM4x11kDdto2dAHTQ/RusNBLFsO4PfiJ7wc5T7HlNAt6iXMzkA3wnOsKB\n83p/+Z/fuzfdztqVlend7xSXny9jcZWNl4vvsMK50Xr02nfgd9a0cG56AdMf\n5dKTTtCxx6daGi3ED6LBR37Mc7+9IY9ZmnfFzg1zC4nHzGWmiw5Wh9hFP3sa\n3BhSoJ3i5KGeRalLnvmc4aFR9wTQZ5mj0q6hM1/c4nfD4sMmkQBqwsREAxv1\naxUzNRM8BkbVqAb3D6Hj3OFPrJA34i22SMDZINE3M9Ceqo7k+pj4shL6bUMY\nAmWcqQG0ty7rZHo5sqHDFDQfIKO7y6UwkeBl0rPE06xzZgAqNu6sdjNSvPk2\nJlqzDg/8rSvKApcmboEepxfut2cOcpWcg61G/EVfjkXvqFHofoAkjFNmBA5v\nSO56/5AS1jOhJfy1PIL9td4rxjSsGpxZWAePvwOpTbAyP5wkxovtlxFkTYmh\ndkz0513rVoQLzyxEFIP1bd0o8Xd61quPttummHobBRMWPn9S3a54WzYVoJhV\no5ed\r\n=YW6u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKC0fhc41mypJNkFdkpfETh07dSaJkIH7PxIUqz1QCIgIgPQKptx3ecimK2qvCc0ChkR4KoDbpguC77SdgYJ3kYdo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.ff82d9ec.0_1584555598564_0.1845185813862098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-textfield":"0.14.0-canary.f50f48ef.0","@material/textfield":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-s7P2d/vVpnxyH8unS87FsIxoLoh4uEoTQCdVgY61yQB3gSVgnkpTgZY9z/6XMzGurN9zJKvdr4eYrv8Zw6Fjtg==","shasum":"1122944dde302dc6877bfb51c366b7c6ed5d203a","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AsCRA9TVsSAnZWagAArXYQAIajkc4v/l/vamf+rF/J\nYihQyeUnb3PsT89GcpprvbrK3rO4A/UL2UBz8yP6IN5FP+CH0E3ubtyuhs2b\ntXmXzzSfhBgdKl2zBH73Pbw9nzHkkOoHu6/n/b1N0W2eLpDc6HMvKeMPPFJN\ni+mDIIflDBWDwHuS2O4YdFfMmzLYg5mNj8SJN9XCxNKumw6yhacYjr2FCXGR\nmo9nftta1xuGurIQZ6J/Qd78ktGL6ZHfKn66q9lVH6vKakqMcmSMH6mgpgaY\n/pVrjfkBGR6SXI/CMfNqSBoWu5F3331We1bwb2PAHL7KB0wcuV4BuXQfCSHD\nFCRegFFOrL+8UzP7uYGENuapT294KzcDElA1Fqu5/P6UL006INW4m+u3Vh3b\npJak9z0N7afPFJXVUPDWGizOk7xyONM+ipkk3rOAzZ+LfU2cr9S87Tw+sUKj\ntZhwPlm3oTMNiIF5o9gm4vdJi+L0y/W275DcASoUAJmxWmfKBnuXSL8UzQp5\nV9MWVE0SkD9JF7HoUQ1E0RwkeB7XZc+/zjv3ojAYH3XwDjxC072Xs0AUFsC7\ngOWQNQwaFnpgiqq23hb5GZ8n9EkPSkCr3NNaPOaQzfWId5yfK/MIy6nRrq3i\nQmJDDWm8KCtQ54yGKWQSyGNYUwZVAOg3DQwNPNDyBkMBCU5Fitl+fjsA2sn4\nAovE\r\n=cdys\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMetMMugAE8PFY9YRk48OldRoIILhXyuFwU5AZ5rDuDQIgLi63UlS7YuKJDc72jFINGzS3qW4usbuzAhvBaZMZoiE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.f50f48ef.0_1584644140302_0.6775186066389063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-textarea","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-textfield":"0.14.0-canary.134cf877.0","@material/textfield":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MQbuDcAzSqRTbQp1Hb3H3C3qOoYPWNjKNNyv4b58ZiYMUsgnVNaviYPRA9K5bh+mkpqYjLMCtvHEV3ed0bMvDg==","shasum":"64f6e51ca7bac0ec615688cda9de9acc4a0101a4","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9iECRA9TVsSAnZWagAAI54QAJp428t0L2jKu85oyuYA\nqBqyII+lNDiBVEXS5CH7134i3Gf5XgQZP4gSj+xZk7p6oLSmAX+whhUjSLJM\nKE48CthDOycogB68zq9DpyMdRWvAg7+wex7RiCdYx7P9BkTIKNZq/kx6a/f6\nMOvutdfYeG6ron+j1G6JqpDex9LmSX/1ZP186yhE4c8rX7r+5xqoWo1tSYSF\n4MXdAlfOGo/l5B5aloMnt+ph86dJnmM34ECtqI3GjT5rQnqNI2MB1h2HAsHq\nF1qNxHEDm6Z8nHU9+Q5uq4DH3WCenYO2DUsNZvGHieyGW3L4D8AUcrWGP9mI\nEwRfZkI5DEkZfZ4cQcoDCHGGGjsQoOCUxWXR0bGu576oSGxqjCCJogbo6oTt\nNSfFfjiZWTKTFTJ2AQ2x+rq35GPiMFSRAFmcfMq+N9+WsB1+/qDT4Vem7dFa\nOhsofmZoy98zEtNQ7VZxGj/3/f1F5kO8YiYVNX0mzW2jV3Saqu4P2sGSGp0q\nfYtfq/LsZqR0MPb6w97xywNzQRcPqZ2RcbRClJ1mcc6zKlByfiAiVl0TpHyQ\nRMT923BO9RPfEaIKyI0i3tuhF+mSjWgLs9pUxRoIGmXMbUiqcx8MPrkK4Yv9\nS4WQ3PhvbkWY3SJJ4Yh+Mtw3E4nBGGPmoPaGZCWPd4AK+pJH9MBqibG7c7vR\nFsZ1\r\n=vxmO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbeaEbU2xEGEuRHGoG4T7321bZKwIKAyYq0SRg02aLgAiEAyuHvfjH71fHp46R9Sb9YhsS2/hdAIqaM7RCCuibRARg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0-canary.134cf877.0_1584650372008_0.8430077833837724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-textarea","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/mwc-textfield":"^0.14.0","@material/textfield":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","_id":"@material/mwc-textarea@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-0ERQbw7KMgPz84JZZ9ec1pkvRN7O/gImhTDv2B3RUKgAnFhY/rrgNGTi7Km43tAcUFxMNmnc2/GPUFWKMUkQIA==","shasum":"4e78e1bbc1969cc8a85d5bfeb4c8107eb8aa80ef","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.0.tgz","fileCount":16,"unpackedSize":177642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QNCRA9TVsSAnZWagAAz+AP/Rh24sWBo4PX18gvSEz0\nP3n5IAG9Je8V9r8ZXXdJuq2b05ZEUPvd8zzGgRJNSLzHn58BbfPXLIvz4KpV\nOnqNznPCuBHVM+AwmhneqgxX33Am4GIXKURqq0DSVMKXKlIg2bS7KnZA7Ewe\npC2Uko7Aqc4IsQwb2/c4ZeKUi0Zs3sEVKUd1DQbV0Nf5ISaiwoGCiDeHu/7h\nPQAVWga5WB+H700zG15465KD8GPp209VeNm6wEZIWZny3SdGCQpHo3Q/SLRt\nPkv5cb0b5YMOkFfrbCZhvSO5bXkQnkQv+03ughTDv+kmeHYTcd4XRNT+z/KZ\n0cIeLt563mnkwVq0PR8U6/1AG3czvGzBjr94EUdfBkmaEpfGqzcERl1gnXje\nKzK83VdNpUy9rPDKNSTBAB63CLUGuUHDS1o4T09ehB5E/BbmjrJM3UPWOFtZ\nXcAon2ry85d4xYrun84UI8LSOn/v8cwg1fO/sXGEr4J1PtH2h50zIX24GBSD\nqsTxvJMDszMhfRZhXqdAknfiXIM2zLUu9WPbiToF5UghpTYjP1tLkt0tUpPA\n6ErGuPsb31UGH9kSO0e9OpsO38SvFISl8T/+T3XagSRT95q91xjHBu7camoC\nacmjOSUEkknhOZXLIFXLQ3VRcpaRuXSQHDnVgRYDSbXBuZy4mZMUPbonovkE\n28pb\r\n=mv5r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuZPyaiCcmw/YjeCmfKQV9SrtjLZkdBTMKCp4kmgqORAiEA1t6MxiqG2pOiA5fEB9JBZ43uy/HKEvaxUvNpXWNP5Y0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.0_1584653325381_0.3277306929522992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-textfield":"0.15.0-canary.2c1a4913.0","@material/textfield":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ELNefqseYVIMkb/bvsMxoE21CHmcBQbwMwfUpl+0CCVrIFKrGPIRnzt05FtUJXYCoLoOjo5KAigFnaxVKVqG9w==","shasum":"4e1da9453e2b3c3aa417ba5f7edbaa683b9d4578","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/m2CRA9TVsSAnZWagAA5qAP/1U1Za7PyI9JWFr/ag25\nWWCMAdrBgH5wSV5nE02LQFhmKe4iDVuaW24UrOuLQohCMipWFCcFWYBoUXsa\nfmzUvumDe7kr2M2DnttYit+7S34d1+uag74Z9nJKkHShRw+MAA5VNDYhEr/i\nZV84KWfoGzm5utkrYosCxsNUpkmkqq+Qf4GmmKP9n8Uxr33TNvaV9Ej5mddX\n5Lx5/HtWvnp5vyGKVeDqXGdn18H4oZaacjFkT+Fw2OXfaugSSdHwJci2bLs7\nlqgavTA1kRyWkatR1EOtQTsRNOb4jf6rh79/Z00Pg0L8NbRxoJ0bOIFZ0qir\n7qNm8tAnT46qkj+SlMmCUdhvFZ9Cfl8Tu8bwb/yPQRbxptBcsFRPXCNsAApG\nn/HgWhjxWKu9pkuewRvU/IUKAmpSEztKWyC80rCvRfOtVCTtCW41C5RTXWgf\ngjPsQ/MzCM8bbONifafQhpwgi4DXh7NX8d2xYpX3hDjRu16/rzIDTf6ik7Ky\noZldGzs+JyRCJYgVcuW5ILpZYK77TVAAVld4WOydj772PDpYiPmu+jQ37lCZ\nFXtiwL4pZJnmZ2Xej39Tq1AXOGnTdu/LMaifYn4VJEXMUbIZMvn91suDX7/7\n5HmsFXGJGbeJHw1a8mAofa2g7KbZlXdXOdI0toll3Dq5S0QN61o650izRjRt\n1C7b\r\n=kxg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADJaJHFHHjeWTCPzfLqPH8Kxao8QwhdEhsKAz2nwdfGAiB+zbM68DWmvQh97Cv7MvnX3aHWs9mu79OJtQz/6riVrg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.2c1a4913.0_1584658870536_0.62890729819401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-textfield":"0.15.0-canary.3a6e481a.0","@material/textfield":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+DI59v/NODD/zZ/52EFoxtNK935UmCC4kiwwuBb2FkPwEfGPwi9rW4dTipRs7zehJGJjSqXqyjBPgELuMhcjdg==","shasum":"52d92a6fe37e031db503e755cebae0b083607575","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfHCRA9TVsSAnZWagAA1OwP/AooHySJXyw4pzUwoj4l\nESXZV8CvZEUytOaA5Ic76DMrR6H43EYv596GKawT6EKu01ODWB7Pi/Js5kCN\nCqDYAXXiSd8RUdfxunUZ7Zdc55hCU15tikhldbFBBBHKWtaCZRHA3Ae5h0CE\nc1UcddBIq7UsNMvbJBf6P+oo4g1NYmaJzY8FiFARChZs7v7ThFWgdYh0RTg7\ngGzf11Y1ySIWO/cEUm+8Pkmkh8G1TROBrtAQh4FG8aK9jgIr5HdYoE4af/vI\niqV/wUQFDfPxnb+KPnCZKby3oH+RgkoHIiq5LDVa3KEM0XuMcR8MW8DDkSCZ\nF7gOq6bt/+bE0wo6n5XtWl3RMIbV270LvIT89LlevRS7lOtmorYeIYF1dU1v\n59olYsEjEmj9mDCi4UtrJG3ZtyHT/F7Giy1oIhELLXaNSM0TuDUBmSm7BgCp\nVo6ljlv29QpHMH/dgY8OqEib5ngJZAPmVsruo6ZKHT+WAirMuNTuLt7ZVPCL\n22/OGcOEOfZXmpbxiwQ7rDRo2qK/+Z7rpse1RjD9wkGH1cfDoElpioa/yt8u\nI+Z71zSLUHPwrJdU4ZpfoB/pFop3AQa1qpmuAX1JziC+6myO/dOUSiN71h5m\nGTUxioa6Meog+r/XGB2jHvzVmeE6oXuyaMNpva9Sf1Fq8zYXF2GfWbkl03zF\nKYBs\r\n=PhZm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfTVLlYXMuZp/BNsJKJtOrGm89TYxtczUDpJ5m9GMyjwIhAJHf7TjfQfJG+FNTUP5w8StmDCC4HxKvPMUEoqDLiwmk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.3a6e481a.0_1584728007614_0.4883284093878957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-textfield":"0.15.0-canary.603d6eb3.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Od778AQfQq2axxe8Ros8FdAZdx6WMZtdNuxGN03mgCy9gDJuO26A7aGQpWx2iJxh2uFf+SKfXXO9lyPJ+Oee1w==","shasum":"e315cc6f88c7c0674e2ed913d05f09f9d53db8c9","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdLCRA9TVsSAnZWagAAKbkP/14BnZ6DQEE1XrMsY9B1\nCrNV9XVgSiUSyC5qZ9MdUOSXwR9FHXB3SeDXaZEd4L/U0cMk/jyic/wStMg2\n/xOD8AUAh4ig3N9WyTgGcwMTtoBgyF1TwycGnNACncsabCxGOYrXT33HLGYm\nNI2BbmmvzIQY4bL6RraJ7wJMeoYV5onGXXcQ1qYbSW2eJoZVRcWa0Lcf6lcD\nM181KribpxGJp4Naow1Ulv7H2TwuW6gCHCoEwVLGQh1DRCAY8/tQezXe+OGx\nSZCfier26ko77+h3QXCmuy7TQjeEEfiaMZVvx9CjIMBoKYEzc20/QWK9GpeF\nQoBZgQKvFWEaHnJZsdhKa4dNKB+0DkrB0V639ovayDe9vsUmiuMw8vOSCTUd\nFIC51ZAUkmycyVNPrCKlinJ5I/u+Wk+XT56zhdBncaVirSgNI2LrhY+IYJz2\nOm3ZjuxqukIS92C8YsC+t7QcRAZgLbi16Nri9L4jVaguWCb5op83ZL4d8Hvd\nKXHvQBhJaG32vOpV2biplopYw9ZxjMkOZUGUFxsgd3LqtN4kLiqR2nRHSIei\nFoBUL1DdEvXCqo5s0u42DdpqGMWzz5rzh33ctL/IOLwoXP7tRj4c+4OOUVdj\nKil+4lTq+tvBztOWWM54G4jCGrYrGN8ALhCcfZrO4dAPs4zPGro6Ju/Q6r3m\nhu3B\r\n=GoSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdATcyceXHV2yYqCyxYwrIZLY7XTzPqBt2zTlDNcXGzAIgLTihxnTKtAlZ5DpSkIdKpppG0ubgkHFlxRZBbfafXA0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.603d6eb3.0_1584740171316_0.2067875131347059"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-textfield":"0.15.0-canary.05c6a93c.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NB5bRA3xNTyyQPSpG02kOuhl+UCiQkj2zmitAC3sEK6oa9gndNwvnZ+Y+YZBFDidciHYAfWTd35GrBhn/f15pA==","shasum":"c5a7dca67db4242afb6ae2e594e18cb706d372e2","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWeCRA9TVsSAnZWagAA8lEP/A+IJ50fg15vQCXF1Nf4\nnZvDiMt0zG50m35Hc3zF0QuCQrKXgp5xoB/F+mnxZfVR1A/IVVIf277rrHQ8\nJccEJl1fEwfhimoF3rO504Ai8Zyat6b4oUx33wl7ohHH3kt1Qw7cUfPIj8GU\nKxriN1E6X4oY48y3sCVhRt6Zci3RYwpw2xTfGwi59i1mT6cflLzPLPS5jKyC\nXytbHhn0qenYyterSiQAOJencZSPMELVZoTrtwHiUy4ovedxm4kjx7Xfmt+7\nhDezTWqEWhb6yuJd9/RKMTWcNI837sUvIz1fLVHfvOdhD9sSYhWcvLXMGYEJ\n/kPzW9V+/lSHR54+eoJviyhzqRcyMeW3PTEI+03n5mWY6oHaZvlJfT+et4rM\ncddRMyGltyWRxf01b7Fr0eQ4jCSXrI4VBjObVc2U3n2XsO4a5aioeT+g6scc\n/cRc3smFTrvrKhcFr3x/0DlDPfmoqQgH9mqlNRU2uXxpnoyiI4XHirlbWN55\nwmzijWC5BfRdm53E6U4NuiVFrtPYQM3S+/eP39Gv6sVDljTVQDW9M0xyMJwr\nJPyEICInHlp38w1xY/EuKFr8tBivopE2J4OvhFxZNwLZ9K3GgUBuZHU/GR+1\nWIaS4qfRioy4bKLGBiUNtjMatuNJ2wcVGjYfC1JbboPqqNNPe/27pOlmFpBW\nO0cN\r\n=W8WL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3dDVWIAFitUoi55fdlPaqhd7mUl2JkDl7edc1btVLXAiAsKc4IeMXcqkXts+y4HuQgymbQ/oYBOISpuTqC6ljiaA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.05c6a93c.0_1584981406418_0.5887802170861844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-textarea","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/mwc-textfield":"^0.14.1","@material/textfield":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","_id":"@material/mwc-textarea@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-+taVTUtx1tOnXPEliQTyunePhWvCzoLgaUPMV8f638bhD/GF6NJPW7UElzov9TgvmLo2QLAgRPdkhbmeA+0Guw==","shasum":"637b279f4eef6f7e86aea8334f7408a6b97bb2ea","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.14.1.tgz","fileCount":16,"unpackedSize":177642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePibCRA9TVsSAnZWagAAaWUP/A0PER7e8rijh7EYBHJo\nZdvpPwF9vslXKyHayFaCQGu8ONO5UXtmNxATwICP6IOsBsZmwTmruPMuXZzh\nK/RjJXR1QpFk9UCpf+P8VnAsXK6BtbFXiVeiqZwaWAPyE8PW/E74SML83rkH\njpeI2hmGv3zR197hvtKYsjPQY/3Gnzraki5aT32lPOPU08wPqJZBnhlryA3p\no33JOdfIe0LUMlnkWJfPELFtX+r0Po0vFjQycyuoOgeps1giLnyG76Q9C01C\nGWpp3CYP5EBynefUy0BXvNNFQFZw98qKg/PBw1AjlKJkbgF6/DQ3qpVBBEI3\npoNKW5fk8bpexOEJcopBio9++hucb9cw3jjLncSBEtsTE4Gnkd/27oVCNIvx\n8S4kPAA1A7U9RWrYiZXqJhhWWYkLuVaRFeCXwzI3cqyV3GojIcNkjOAgtBd9\nvyBNHMR9pf45t8jbpCYTLUfHy+srl5pjtfJ3V1WhMC7XCQDJLAvrP3Q5J9fy\nCV0YgdLC+8ZS6K6f8YQ9Kgz66KroNRJl3klatNuVAOM0bAqrHS0fd7E8T92d\npr81hzBtV+q33Twvram4GQHymcJOrxfgULEz89tDhc2Zeu0MiJp0qzWH6w7W\n6zIOS8NBWgrTdvDFm2+YbVOH1/bWuLgcktYCesg3rQ5lS1LtCc1O7A/vCuhY\njC2E\r\n=KwN5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp8HBE1HbESo3iNB4axWOmkDlmfzenjSpOdxC+pZusowIgNROqZ71MffYmuw2XlkxjlyM+z2Qkzp4m0DolGkbTu90="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.14.1_1584986267180_0.07279257737964318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-textfield":"0.15.0-canary.4e6be3f4.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-fvfW/KG2mVDurHh7AgLpaJ6nU0vpypZeUU/Mt4UWMiGHAYw8QPEXuSkdRr9i4EA5mUi9cqzagTeS2YMU1qkCoA==","shasum":"c8bc6b86428123e1519a2c36eb6e3278d4a3df42","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSdCRA9TVsSAnZWagAAaF4P/33+Ahl6PITck9k3wDV4\n3knSboQOq5QITGufo0XD+hnRSxEdGUk+kj9hK3MzBpNOu7U/3cQsKfnZ3SeU\nCU5ch/7eEftER2hohORbVf+zB3GacXZPVmZldkZZYjcZJuVMedK8NthJE/oS\nGqEcdnNIaOMhpV8Q67vW5KIM6OQjXyjdmuW9VpZzr8pN0CUnE9GKsajBg3oT\n11+NJS/0CB808cKYlMtFJmlo2Kqf3ECAZ9DwkzFJgQEd+W2irb+dV4BUbB4M\nxl4trNWxIVWtNtso7Nwk8STe2XfnPDIw4C3+BL8pfolzf7sWVd8fi/hPE3pq\nJ8DWFgVSy3OsVr5Y7hOe6qe0eIGNrtx43jk1n/PAM8Uj8iEzrdt5WX3KZR44\n7oxwx7EZn0acaqMTm8Z9QE3wVScVYtXSfXiwSAul8DF7fz7Cabyvlmp87Rvk\nhXwO8qSmJwnvPrv5fteRb1O2ItzgOOjnUm63TQRu4AhvhQ8ueBY9tntkun1f\nqWxeWdvsDpa4nGl19vFnB9pjkMZWapYx2MTCb/YdtyrG3+1JiY4JY+vEkbks\n1BZvtTjYLZeppdHEqZDAkn2St/VR/sYyD7kqzypW5lwmpkQXkFvJpD1dJ53/\n8FslP+Dls2F0eL1+uB4/8ELLAG1sv86yJVbzHx0CIn8RWDhDUxFYigL13J5N\nIA28\r\n=mcRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvhmv76Z/hI9PLDjc9S1+aNlo40JkLFdXk9sgeFW2sDAiA8o5XnqtQCySxxqMhKQ29+Hi6MnkQpGvwJfn7dLC9Zeg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.4e6be3f4.0_1585083549277_0.9762168703289449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-textfield":"0.15.0-canary.c29a683d.0","@material/textfield":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HppH163c75UEGrOmLNR4P0QV7R67bkeSxohSgjlev4VDCSE7ucIwVjh+QAhfIOSiEy+VQA/O2AQ/t4HNq+7nfg==","shasum":"1d2e0fe0c530cfed6fdc2ae974cbd9b19e3b98c3","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjGCRA9TVsSAnZWagAAmq4P/Aukty/3HabGWVUWi5NI\n1fsf0aTUeXoEHHkTzkyA+P329tK7r+SK4TH5ltoMHfR9+Fw4hSRwCSFxl3L9\nqIc3OhZW0XA0iWMIKKGRjccAtmAqRe0oqGPqiX9zkrxMQWMWLhAhZ6xxwifP\nM9mNfF+3SBu/Jwe6/t0C6ez6VJo0Amme6thqvZ4n4bbmcHH3mvPYBXYqGxJB\n1PyzXY93D/QXCNzAF6xGRL3WfCcNfoshIOWACztUhPONZL05xGPxFCNhNzis\n4Ym4wki8h15wljUamxSXwFc5ibBiPt/l2w0MVN62KOCfWB/jXYQb7brgVMuu\nX4GDKJ+0ZM66l+kRh3FtpdVgTNPjZ+QtVmXwy6k/vuY8bdtOrq7tFHiYXqNF\nfYf5ytn6WzKtGrosG+CxIfZJJPyyb9VA8WX7GvG/We7QZxO7OKs4tjxyZQOD\nGcvPtlpLczERf/XxfvAuIJ6Th/sdZZc85EcX7xyBd2IHqKkCTN32WR8fuTyi\n0w/L+6QH3OQ7xJeMz19DeXo1OD/7boGucm714A3W+oEEQYEkkCHW9nDB+MJD\niEwdeRWf+htO2CANwjY5dLoMtxBsdDCoLgRbvw4C5zOW6OdEiFWRIGa4Sd96\nn8VHjAkAxRbj4IJ34xULTl2aaUrSy6wZkSrWNPAOQ1iN66GYexTSAQSfdIxN\nD3P4\r\n=9Z05\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuPjjMheHHp9zCH0CC7fsKtFiY8grf01JifntWIXudxAiEAyf2mcKVPl8Z+NC98CYIwUNd28jpp9DkTSxGP5YjmwUE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.c29a683d.0_1585084613829_0.13997724217093688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-textfield":"0.15.0-canary.fca3dd9d.0","@material/textfield":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CuK44dy4cxeuB15v1EKLxtunKU10D/qtdEi+Hwaeu8ROZc/x7S5UjyipHgDuNlvUQdLcj9gXsfajs9teNCcoyg==","shasum":"0033296743d74bd8394de0da6209db4fd4ae0675","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsbCRA9TVsSAnZWagAADpcQAICT2CNAfaV/9ZKCcgvw\nDiRUVe6sy7TOSfyZgIPH2DUGwvJ0wAT4H1hpVxyHFwQxHvqaf2apBt/W1A6n\nkN6EFN1LZka2fCMScENJwSS/qyTSt4AJOw+jRv7AxVUYCaObANeVhZq4KCtw\nx6r5PuG+efHUHUPoD4tdTlQVWKYQQHN24WQ1w4khp0v/WMBI8FKcZRKgmR85\nhrFYzrPGpzsqLjv0Bv3aLweRZOwIIg4GVDvj6em6E6RSN9cOlU4gzZfgVKox\nJ+mmbsk7ds1ufXcZsoW6VY1+pfT9HIziaO8tzMGEj6mDzJpdhvWzKVcJQkpx\nVpy003Rg2e1/ad1cO3hs8Q216XDlkAIMpusTtEQSwBrrnFxXPaUaFUSckql4\n18p9kTrf8jJSR//7NqXjUhZoytEQGAkI0gxLuWPffWIPpeweOeIoXiEJTJD1\nf+zcAMD1JqxPQEbk0I4P079AXEyr8QSQ4/8joSlBgW8WM/aLBCbLjJNsQTQ2\nqOqaFxJaob/7YZ2rGNhdM/I9hrKmMLWGDCEePoqBNmrnieDo5DGeDtIXr+tk\nfsU0wO7i/aj5xScawlIZBkZyr85yrTR6i3wyvfXtvYEQ69spqa8+84i97Adb\nzLVB4X5/Y1xeiean5JpzKDqgSMinJN0hOVK2LO1ZXrKb/aFeAlOelI5A80oq\nbLNO\r\n=0kpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuSVYA9TL7py2wAcCH2obdJLfkQGHQi51xyN2OTTyZ0AiA0wkR/E1mJKyN7vmm7MDDlr/dkE2bB1F5sDf26r5Tt9g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.fca3dd9d.0_1585093403214_0.5387013098441298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-textfield":"0.15.0-canary.1e73da49.0","@material/textfield":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ogQ4z9+UhWCd5l0IWr0GC4vXWaQeiWEQDTKeDgoO9XJ1Z7962fi3Dt39PI8hBCK2Y40Pg/eZ29lgQLDNlCts/g==","shasum":"62313cd4bfc06424760658059151cc4c3c6afd6c","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":177694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81oCRA9TVsSAnZWagAA/K4P+QF99HM9V3pz395RoXEh\n28O0wLG9Bo5v0vqpyYOq+EAkhCSkLcy2C1CylPhHwIW3spaW+8F6/YLsQKEZ\nIef+eyJ4ERUB3pOZUp4Z6XadzU95WWLn1epUErasCmxNLLnqjPFHYgX3aSsF\n1btUSQleWb0aXzsS0x0bCIlQujB6IkO6gNAF01incJQUTAoknJF2tZ1PnHyd\nQvHkUKJcNl5sdzfEM2DNgywZJCzT8VgXQSUmXqQXvgDw3JGdPGQm1r8YQAx8\nq47MxnzHgJl4zpZ0mle5I4IvYFa8RdVN3Wa75ddSRVzuvM1vrmk4E6RRpxt1\nD7RokStdvVPtRz4j++VyL7G+H1TJRhN0bXt1rqMA2IEdDyKCs74SO5CQRw+Q\nzWQh4/kc37B7eO2PL6VGvk1Q3G3ruZxbVk0a2fulgrzYtFdCunUCPf25YhTo\nZNsOu8jmnKFSGIMkAmbhw4Yg7SYHftJNmTA20FeUZDBaqBISJf+Xi8lFqHOx\n8P+R4kxGN0xVBlgg3vF5hw4zEUDAyESCx9z0yvBokCIhJQkbUiRje3YcCVFk\n+okTmEwl4rZzR2EhUiKSxOA9fHKUkHRqfP/IbL5M68T0d2usOhvLR7JWXdaB\n/fytzAadOhNKgAmqNOJZ/slkbyR6SRDXVy97K/zLwPXk3PwV9uxwYLxNjIoI\nc/5L\r\n=PHUD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaWjBx9g6ngCrQOkCFz7PEjjo5kyEtCdUGF2UFVB5YEAiB2vyidQt/+bZBpTH634kuaG9S7urFCQnF6NyCOkCjCxw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.1e73da49.0_1585171816087_0.6413891770822029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-textfield":"0.15.0-canary.bb6dfc5a.0","@material/textfield":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YMh2ZTFc5bvlkKxVfw5PGob0fXSScOHPCjZd3DLNa1ZMZflx6jNoqaYmb0F2iS6ogd/nKm7Dw0pi83sBfCtjCQ==","shasum":"03886ccc1eebab9746b003d59d669e61474ae089","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":178759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWJCRA9TVsSAnZWagAAPkUQAIk8r56cdVeEBMKgPw0Y\niCiUwARprBpv0QGabwwaMEqbnjm5lkpMqZR//lqz6qafAalH3YCxxapiw/6B\niGBrL6Lm8j6Ei17WV9pnLkoYaJ7BI4KiWgL2vEM0cxJpru1dgErsWPV0rn/y\nWOUSI+fWWTPteXmKo942sf7EB7lkorvZpx8En0EPWGONBU4+NTdxq9fMI+8o\n6Jou2Q0hyBto9PJr4QETec49hd12jJUuD9f1ew1w2MV/StIyxpWKQHZ/p3qw\nzuGugLjKJfWIDm8v5T3GBSTWjcjKr3H9yR2UE8iLcaQkizad6FqnZ6/XsZgS\nFWdMtNEBg4LWJXdCWJLTnIKtzIXKv01QYW+u4ReRCqLe6rj9W3aIScITuhY8\nSJnTXOFBvqkPqJulGQtp0q1fCCgma6VrUjE5UiDQF6onIb0ydI/ndp7+XmiJ\noZhHKp4VC+lrXBbSqbEo/gde/59FvbOmliQO8Isfa640P3bxJdVauI/O1bZx\n9PG5lccLXxBlZaje9xpbKW4EvgNVveRatjyjRmVvUauxx+nig/mUEQIHDKiV\ndkHwGS1YPTR3f4tkqP6TTmnLyCmNu/fALmCnMAvsDOnN3v+X71JrXbnNgso5\nMEwbzZJYkae4V4SxS9kh0eJd0t5FQaNVy6CliSOn1Wflq33/9UyBFUc2+AA/\nwluz\r\n=/2PY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOSyZQ2KScibIcwi/nhy92cAPzH3BmlcWjZ7r+UXba/QIgPGuOF/+FCTvrT6089oDvw8JnygMvnyi0D6DGau5hwYM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.bb6dfc5a.0_1585272201454_0.6441303327705727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-textfield":"0.15.0-canary.1884603d.0","@material/textfield":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+XF55h0zb4VUOZLG8KhP09zvQEuciOC8Sqkqc94IGKMcEwWaztnockENMCHp/FgX0EMlhnlqHJjjG8Iq13iG9w==","shasum":"7a2cd132d169d7fd9729d420015bec543c68fcea","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":178759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpBCRA9TVsSAnZWagAA6oYP/3upP5ROcpO6FQMAlifm\nKznrjcOyflHeoENkHbOzxfgV2QJCXsTwzUiL3W7G7by6lA0ktuSHCw9rMv+M\nd84nZVJ5Dl22r8oOMmGQc9y3YuAjuObISQnvx8yZ0iA8cjjQfGjVs4tqfx2v\nwbV34+UfhAkhbiHj/OI808gdMF1U+dCpnPrh9YGDpirB4hqgg06cNf/3LTSV\nukT45BEH8wFHKUagb8ezw8JHeJDKwgN1gjR17CpoCR5BaHdHGkkjKmAmcv5h\nHRyRv8dv4x1OJ74NZdmE2LAMhalWBK1GS0h3MYMt4NwAi40d76bxRWJ0pYl9\nFrS/P7mq23o87idzf9JtE/2Ak+O9UIo0ommiDZASdNFSbHitfqg+FRw3oEXW\nxWIoL6hKdfYcZU0lgLomiegVtFN0yllSX1ayYn3TmFvJsSs4UDBPY2It3H3W\nB1UQAPxML9Nvy2c7MeaW8Wm2JTc3Hmo3ROBXeZ+avWOrqNEIYZtBwYx/Gf6r\nG1BvLDPAifOQSlPZXQY8x0XFmjl6goCq4cs7/l3Ywv07BLo4aUd6QS6o1c9e\nOwJ5e7CN/xOy5SgVqU17M6S7Tnf8fq7qRF5MqU2OHgfJ8VBJ8dJMpDrp1OTN\ndlxpO+TEG21mz/HDfHIX54P4yM5iOkCv/RLAXF4B/r4ziwnmY6b7pkD1anrS\nYjkt\r\n=/5fL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2OZ1SrQ6lojDcqB9llrYPolxk8udwm7ukq8GL11lJRAiBzbxJRjBSLmnWEnl2/Ro2Bo4v3O2bHxHAem3HxGctiSg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.1884603d.0_1585338945390_0.836576711326749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-textfield":"0.15.0-canary.aff73cab.0","@material/textfield":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QdrZkdj59RLQ1lAjSPhbr7gIG2OlLQgn9qYOw8NCINeeajcQOORzUhIekDsEyDshLwAMhRiL7t17KVbXBet6+w==","shasum":"394d0aed986959320fc6f449a0a343e1a5fac6a9","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":178759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmy5CRA9TVsSAnZWagAAkDUP+wSoJS8R4whQDGAo9o7I\n1sO/xGe6pSayt9jdK8Yh2S0ny/m59OGG+lFIXI7qP6+1KhMbq3K8AsbgoO6h\nMtl/mcvZ5DEj/blcQLhEQ92lf8R1aiEJh+v4bsi76VIEf51+Zp9QhJDY8vjp\nmw6aMxCBh/3zCyMxJ8+JhDTYXlRNRinbmXEe0HojCjjefAgriv6yFgu4Kq6M\nA9nC3ERsP8a8TSh8WlueRbz0QpkIn48qN0xC6E2Yjr9ZB07OI2AtQEzqFaq4\nC69v6mPtBHFlg3qZlEHK9qSGYpCHTOhmFeK/zxge/pR9JamXU3AsxO3jF7i3\n8DkurSHp+Eo/xLp8zjQ2ET6MzvnaDL+RMEgNa+1zBTrv/YSjkkSjN98D7Goa\ngTj/+Y1GTUtyuXCl9J1q9U0UJZwkIAsk7mfo1sJTBDTjsQX4xQxqnCGI/8uz\nA7NnJFVE4YmLAQyKLdJpxRaadiclxfWNANN3zq/ThVCza6yAv2zreUejC6T0\nTvQ3uKKLd18h+5v9Gx9xMsym+DfEJCH/F5frsXKnvPr4xgFH4O/REArMekMs\nGZcDk1ROuRo1yc/klTVX/UIhDSQWhsi9BelsXSO2yyVpl1geB8v+fj/oAfcF\n2M/HyoBmt4+0WpUdTEkglBvEQJZvwnYM+nQkShYMVZhxvboW1Bc/QwUG0pBe\nK06M\r\n=Mbka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC34xL4kBvehdNT5ltPtSMbrJQ37WlLL3amyEPQ2UyQkgIhAK1+u0nBdTwxM0BW4K+/BS50TBwS7lQkJMvstFmwcESv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.aff73cab.0_1585343673346_0.4067567003078043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-textfield":"0.15.0-canary.63168f61.0","@material/textfield":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tCbA2UzM9Lm6Wqh/ROHZiEMuTYXkFKUZMNnXq4Xwlna7buHA9vccJ9eGTKc6iibl1OoovCPf+O/xHD2OPqYRXA==","shasum":"ecda180c9058b2bf8979afd6ae55aa9a2965b0ea","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":178759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gcCRA9TVsSAnZWagAAYx8P/j4a4v/ZfEt/0DwbhzaS\nq+TisrTqtd2bdhjwqMGpYWv6DvcLUBR6sYDHjEEFofxIld4sFWOQZAp9INVG\n1v/+M16lX11ugaziZNxigRBH2f5gBwEMa4l0qIwr6LwcpOH2uL8xtnk3VMNt\n3ZcbBy/MGff9ljQ79rO0PsxYL4t14+CARwPXUGwZ//PfcGrE1DjhMQJ+TzH6\nl3bOSkD2K7ZRjzO06mHXne0PWoOx7+Om9j5BhidthBp8v0kNQMw0ZCZq9Q+F\nRlUdBkOpRah8/6emlYQpc4f0NDoKCBP6z4edpVZRTn3rGGb81DSAiRcdHV/s\n5VbpCdDj9jdNbV2LOTVMcQFZMOkqQfyKSYnTrjK/IbM6Ku1rIkwI5WynVw5+\n4dVPJXu1db0kYk1RPmR8SVu/Uq9KRT9RAMKGTCCnLntbmXdaU2KTjBzw9IZ7\njOlPcWhYKvOmE6SEpVO1GVMTJGeJn2B+JGQ0WC7qopyD1wZtr2hzcO80C6zR\nnYxTchFE9Subb1SM42eFxPBNlQCjKmI9wEF4TKWSpJTkWLPNjPViLXspidhF\nPX/tbsjH7x/3Zfv45hGJ/w2qce0NqAzMLTgiV5wb+68MLdQFuO7yH86MKAdz\npTUIq7WUtmZ2ec1AjhWYLcdtbxqlvtzlIRi4fytvh6u5lJNA0L+TpAMHy0Ir\nQ4Uq\r\n=JEx9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBvxNzxeVUHZ7rvNqTNzfdX2wENHFo5Dky6x3GYbKU7gIgL0+wgzontqdsXbg5VySTFLJrzz0u5syFgjIONpXUIYg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.63168f61.0_1585678364237_0.3586181555554875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-textfield":"0.15.0-canary.9fb79b3e.0","@material/textfield":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9xX8nglKthtJywrAbqSC0IWWfOzcwCL5sz6AWBUWdHPfaU1GlSUZlRhIG20apGRiT7YEavPtEtlgifkczH/FIw==","shasum":"d6eba7c0b96ca157f78fff317d11777f4d702f32","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":178759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QfCRA9TVsSAnZWagAAgBIP/R75aV/8qFDoQZY2PtSe\nRDH1pLtQzwiqyP9SAs8s7LL0Lu6fyxJw0JWaR3fk3W7a7Zhw6UHX+uePQG5+\nsk5r5uce3nbbqRJtz3zLURx/zeQbP3lK173XVGXqR/yVhZe/QAMlKN92jFJR\nNwYEZ+5i/j4dpK0YU/YlDM1B3sXblJdPOsr/zWrrpQU0vDdor0bThKJ5xwDj\nrm6O22DxMKvpjSoS31Wph8EaFfsHCttiG/Zuca+U/FtYxrVDr9bdHr8be4bP\nmaTklfKEBUCkTE05VINONlsfmqMYI/0vfvU8QPISQU1l/+OLYN/JUjr4ZLF0\navjUfH52dVWVJZZ9yfoq1V7ayDZVS3JhFsP3/ZhTSuXK8RqIAEYafKNWdicO\ngsvDdyTUnRm+qS5dBNjtfeEF/ybY/QCK5YYaZRp1iu4PHJemMHLhcssKoTKX\nVn4A9T47EEEoMqITpTvXTnMxZDEUoeH7KROXwkUzMM4aIMh9Tv/F45kleEK2\nKuNBZvsVhHS8US5QCel3PV7UbGPhlZckocdgBIllr3Wl/INR2R2deFJ/xypm\n40vD9LDvEyuz3M35LwdxYe7SHDfvZH6TeD4KpWWs/oo54MjP24zUzXJ/vNC+\ndOj+lMS39GWRO1NLuoZRZ8fdo/rqrlxvCjLJw95+jOiY44LieaStm9RIqOi8\nfoSq\r\n=ZtbI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvPvWwPpVtzO++0on7mbgXGD7LGUw0xlXbcxWWUsE4tAiEAw28nitOaDMPWRCyWojEBJT0pWWZOpTsT0XQ4vr6Rf4E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.9fb79b3e.0_1585689630683_0.016042771875256268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-textfield":"0.15.0-canary.9bd3e9e2.0","@material/textfield":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hsSwa5CTpX/zXu6n8dcsDsZHoCWi6xOZ85LC5sJPU9YSbcBE6hDxoJfLPrKsg9UQ+gbZbpGrLJg97XH/u3KDTg==","shasum":"f4fdc59048494ed445c22ba16020f86171580269","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":178759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91fCRA9TVsSAnZWagAAns0P/R1UrtQeSe+hyPrsY9H4\nYArKlmiuAQYfDuFzoE8kR8Xyqm4MpRsYXVkQt8LOgVJGtdczKmIk7/Pojine\nNAIBjPSy70yyAvRVPq0KXB9R8fyHpUAIgaD4sMITpqBAQsZGE9IQDUH8FMon\nS9NpW2HmtitD3fQMS8HZUmFK9kbeCVah1Yk5lFOhgPE78RvshhO1+u27DQXM\n+oOzpgV+0moi4pyeZNuPESNDHM8ymPOq+XfMrxcfXojPG/SqvunlCHg88U5m\nm8aYj9Dxpykmc8m9Ob9R+9306ioodLOk0FzEoIdB9JetqRP+C8zOklU96rNj\nDhoTigwZ4NWhtOzUUJKqfYHxq7JEi2fxeHTyUMd9FwJipJs6q1ft88lfoOUQ\nN0tS2JX8Mtqjw5Qq8wPiw8WQfM6nTEMQ4RuUfYMmNedCFxSxK6n2cB2B6Vpo\nfcwe8Y7tppw9/TtOKTXVCjlNLPuH4YF5vh1aIXSScD+OqFSeICJtMq80ZE74\njgDHJRpmzNLhsX/H+Sqz6ThyHwzZnUbNl9SL1oZbhnRXhk2zA1ISHzv8uAPN\nXFEfYqGM7PDWGqi44obX3l6JX9owmB+7DBX64rHJFl0sBVk8mElraglEksR0\nekc6SajzENupCTeycPFt0qPogK9ml8pq/cQJ2wDzMF1jnWBRRqBywa7WzuC0\naBCJ\r\n=C5HZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdYrtW3DCdcdn3ph2hb2mjIquAR98a0Gy+qf3UGntjfQIhALdyI1NFKnODPTa4j03cYj7KRq1Y4r0H4XnusQ6OO5hw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.9bd3e9e2.0_1585700191191_0.7447270893900193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-textfield":"0.15.0-canary.072084ab.0","@material/textfield":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PjLWKm+1ZpQRbjkKz7REuunMD8ylR+DSgvBDBAuAS8Ef1Z4Q1mZab5kKUPY29hBXZVxuSnU4oVcbI3QhOhHJwA==","shasum":"d96352c1181a34be8909f4a9f61b6e5fb8450125","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":178757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAICRA9TVsSAnZWagAAEZIP/3GrMsuNtCjF6/gjdzk7\nvTOYdAg3Sxqfgrp9hfycidPkk2+0b6u8a0VvG06a8GDTsno4zfisnBL41Nod\nk/THS0pcTaRFGXbQbgxp2LzN4dN3Nq/3QqfxKbq3yPzbJFuDJU0qTuVeYIyA\ntyC38NWqJXjUA1W3KNSjgR6vB1682i6bJZDzKNASYYOL3JE57/rzrXS3LWGk\n66XtpysYj/MBNcvTONhHmm8j7s2wy6deqvkFdmLNVfwqZ8gHjhpILKJMR+Mi\n5teeD63zxvChijBrGcf3GH2uHlJRu/4yXQbzv7Z4NSz6YUqqfirNupw20UuU\nk+/uZwoLsuXdD1eKoliRuIi88EbsWhQJ//7Ta+Tlo8OjSzRUCXyPymZdqiJL\n52S2c8RuCuA1OMZrBoNdMdMyUcOs9smsisTbVkqu2BV6kvsP3oQg8vtx/axH\njhcrl+9rOP/D94vtVW5yK+buQIFgCv4no/I7/8cA6Fjl9cODdBW1FlO/kw+U\nCGREZsBOvf0xA9EioyuIVDKtVw+MS4RqXe+/4qkx6d63AmIA40NrqWvLCTns\n0ADffcKsEXSp0j9+zFNYxL6oL2S0kCpadIZaulT49gRe9ANSnzV4IGXththO\nJ3iH8v0W2DrlixKfvbN0XVSBAIlWIiSGU/EOyxdTTS1AO+IMukuscw5lXJsk\nrZ7c\r\n=HAE4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLj4DAzOd2XuiY+3OnLoG8Eg6Kd5qTQK+kizYsAXEhgAIhANYvbcg5r1FnYUyb8FqoFaSqlquCqW408i7aRl4+sSzO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.072084ab.0_1585766408477_0.6776560866215062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-textfield":"0.15.0-canary.4dec04af.0","@material/textfield":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+Zqdzxc0JNnsQque7EwefE5EZc/H4STqw7jI76k+6Buv6Z2cpSZg45Cd11mEb4cmpDpwS74/eQdc7F6zhOfFwg==","shasum":"8fef3b408e6e45416f2c195f99ebbcc1dcda8370","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":177311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zMCRA9TVsSAnZWagAAdmoP/R7jOhbUwPRYjyrJzaRf\nZbnh/VMcUAS50kNpEX+rpzO7x63mZ9W1MPSiz1dmX7AtDXBxPJkyzC1dYdeo\nWTDXnPOpoIJ0SRzH96nJfy2+9OFGZD9wLh086XlJ13kbBzuzzf7UdOKTVlbo\nMjV/kqBIQJE/nL9fvpdj31CPL2T21ce9r1g0uLJlwbzfmIAChtEyz0ojZ+Vy\nbpKe4iba6v/xsh222v+eGeIA4ckfFkdI3avm64424MHvUoesnLIUlNT01xCV\n2bZhs4vdGA88gH/1OrJgnHicdxYxlGmW0+W9dQEV5IEdH9m2lNq2Yows6pT6\nTet57JqFhBJ29nwLKxMwvLx0uzX6WwOWCai4zFX0bN/qQWmtTcrSyBp8SRLv\nGb24vjn0jAbJ5NmgQmHY8PDgVlOTC+/TYyPZVfjT64KuMjW3QAOVpuT4vpXk\nHL62xsOZmgCSUR7WyIpB5LgaA20oZqMWfUS+gTCx/Z9Vt4ZChfD/zhRhmjYd\n7W8LDw+/BRZTCfRIjuyav9RMqC+RJNQ6sGeoaOIT9ZGrrVSTOBjOw4kwLg0R\nAMVxTMFeUJxy9kd0lvj0kRe2c9tFd+mo1OhoMjWNU6DJHWKYmsbFOHGHudIm\npK+5Q8fxjC8vA9K3uta7JDpGNxDyn6HB1JGSQFJEvhX1kxOF+ObX/Ka9SkVQ\ne5mG\r\n=RKTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiFTdEnuDa2cceV0xGI/Hprlhwb2vbsMaEZ4njCAUG+AIgf3+e7LoocE2CEE2z3YYQkgudCutJvRh3EP84bZecbwc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.4dec04af.0_1585945804390_0.24914312161264096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-textfield":"0.15.0-canary.9b676354.0","@material/textfield":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1CsYLDpCBu2AKiscl2BF6QOlpjAgXERNctF8xtB65Cdwc2jQFEvwtvSLf0iUl83yuQbVAlBbbscDSFHdr6spug==","shasum":"2fd1ed085585a0935a629c952e34d3319d5e3cfc","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":178757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zdCRA9TVsSAnZWagAA1F4P/jHW8BFpWckfUuAcIrbS\nNSKxILzBLb4H+3JLt1grrXRRjDdccOQdpHCjM8/ZSKrPBfyc3vG9W6tuLT9Y\nnQtIc2SL5o7C8dbFc9gatmjXS0NT7XPMPt0P5EN3RkJMHlkdBIOHqlZj8WaP\nQSaZ0qBuIdVH+M6T2TIvvs6uRO0rntHXbn3moMMOm6ex92+n+HRDomxwiBob\naaFzmqr9R0mdwYnHhIbh4BnU1icYKxBg2zPzZkkciGqL1PtLMUVSALksSo2O\nM38h8TAQDiED7Jc3pFi8O8HBiDu9Id4MBrSkTuHT+8PHiGszEcT2m/DPJjmE\nkzCGBZCMzx11ewO+6fEeLRdjvSMTwORQchjT+oowp4JHxh4/RJ6GZ6txsRGE\nseYrt217oIYqrH74HRhQfgt5XDN3C5tuxBIc0CgK+MPRexACqXM8IpawWv/K\nFCTmr/n2mizl1HnQmY+55HDAX6+7fmeC12b8GOR7EHEPzRthLpUmyST3L6Or\nwoTfk2m+Pw6rDMBk/WWvabjiLRFUXYiZrtD4ZOZnC3eIY2Nu44Go2sLjk9kZ\n8GiX2Fnbkr18BAiZy8kA1V78gL5Ux6Pr8K0Ld1GhLYgqH14gp5DHYhY0IPao\n0YqElLoES+c5IP/MjDYeCsnUxV7ktgkmSwt69jpEYHdZbSno6X5fLHtDnPC3\nx+nw\r\n=XKCd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAJGvqqfgTjlondzA0d2omUFt5H+5Of/L7JJalQVMD1gIhAOFrNLbpnBqmM5gGauBKFMy4ohGXifD9rwWlHVa+fElJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.9b676354.0_1585945820532_0.28361913752212176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-textfield":"0.15.0-canary.6b946095.0","@material/textfield":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-T6Yq7HCyy1uUO098Io5fqZTGutHO9WT+UQW69cj/MFZdfEJWhnKSmXLXFrP7KXDtO0Fm2bbrjYAeT9fMG6EJiA==","shasum":"a07500396de9e365655d45fa2b8ffa2f01f3bb17","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":177311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mQCRA9TVsSAnZWagAAkb8P/A+etk83fmjWphwU5ySm\nAQYFNhN6a59M31s0/pYCf3IuAi5PMo1YCvMRkp2i3o3YIL5RwoWOJEIT/eR7\nBVkSrqd6o9IPW/ssIWFputA3OIE3kWAFLv5EvBU1682zPoyRB6uvW3VGJF0s\n25Xxz0UeENJ2LhRPpOxv6oW7hK6iDB9CBnuoxAkcOR3KA6aDV/P86jeO5ZJ4\n3bXmQ03Bcujb78fhukCHixeCnogp3bvSgR52wn4sFze9SHOVDl/Fmf3b1upG\nHfOIz6D+8xPHfE/TGhbcTE3RNpN1d3uAb0uU9/r5R2DuWe4n/VLB8t3Kougq\nlb6ku9r4lctEHFtGufBnMxpOhmsYDWyYlG80ZjLoJVUzUtu+5DmBlKXYxevc\nZyslcYGsHKdKs8e6WEN2QZkKMoOQxAw8XyUw6Skn/3gMIxderEnZYRu0n9cY\nncG7hsf8SLx+kgE05nrjdAQJhrw+IcDYvs1yYAM1ppPqwjbq1nDsggVOXXgf\nksxFiC60FhWnAOweWxeT7L/Oi0ijEOt7Uz3KRsIbd5EnMNYa453drDpJI4tS\nJ+mKtWfQb+81Rh8asy2yxTj0T26JhDtkyVimrkdw9ioz4W+/k9vxdY6wkfvl\npjMEgPjt7K5CN2JEduVkXFQjY5gKTSlBnBa+voKCaOOm9M/LUc0GjDtjXurr\nbiMQ\r\n=jMQg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDd7AlgqtYVPYytW8zQi62tSxd2vyII1L6lj9Si/TimAiEA7/fyV7W6zPpekUWe4OsETSrFS614KBFXnK5sesuiD8s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.6b946095.0_1585949072122_0.14597337034791935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-textfield":"0.15.0-canary.5ccbfaa2.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rBiraJZh0jUYnqtAOTwuLRbnst+kbBNon2+oUkKeU4FcABLW/Gz4QOayrG6n/eKtj2OF02E2H/ZIrYdSlhDu8w==","shasum":"8b360d980bd9870af7a8ef8f35ea6f8e706dc0f3","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6riCRA9TVsSAnZWagAAe9AP/jLrOiNzxqce0Y9Ztsog\nA4ZWsRn6a7Lxx6LnkxxzfcConOtAIKcbTN2brUf7yr8TTbZsbe9uqXb4F3z8\nV0mpWP74aeRljx29JiOFGXA/AxmNM7I87kldF/hCrmIDFVKlIRuuJm0QNlJS\nBW6QhRHXWe1Ng3ASTdHrND1/xsb3Z3pH1jWsO2lqXj4TPFKUzGYxVa++Tda+\nt9DGHyNQqw7qHeBdqlgRDnq7wBvxo7XgCuoBEOPniBSMGvbrOTa6tAC1aig6\neUPLGFhQ7hkGVp2eW8v5uOs8OBtqPXMUhKM6pDEcU8gu832eCJg/CQsIYz2F\nibAbxPTedsotyn4AFmwslmilPR9p1vBSbfeAx/YxCuQWZUPlfEKzkig3TxUc\nujs4WHBGz0ir1ktACHj9nVk/IVX+lZXBqd2f8gE30DzOeoIgI0/VQbR3er4X\n9Pv0bKjbDnxSzyFfQLvDR49rzTgSeig5HRsSzxe8+f0ZniWPvunYZDcxy09G\nKTsDsjTM7tnsw/xjWF4YV+xBWmgaXwzn7sD1Pfdb+ofN3bloYuF5x9cuQPCp\n+HPKou+mxOHFknTKLefG3kQLuEHmW2xoggfCwRGzdu/pZMlFoYXR/heWfmc/\nn18jU+0MsDRixR9aj/WQWE2ZyHTS/UMXqug0H/SbGipEexVsXSDGTQeO4hmD\ntiBv\r\n=FHyl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxmwpx/UKLtFfpv/pCFxlNxgK2olhidOj4BYliSWRTvgIgLY7P8p/Cmfg2hU4dhzPor2Xf9yt57MzClwqWDydubUg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.5ccbfaa2.0_1585949409881_0.846858218739345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-textfield":"0.15.0-canary.a0ab8772.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-o2LR+hp88gNeE5L8abLyxi0ShOJyCkkdp0qYjXZBPuTN9caHp9rz4Tw9m4vAEzIXnNdIW6eDyQcjq/l0r6PUzQ==","shasum":"281421f0695b1417766ade4f7399427f1189a04a","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3pCRA9TVsSAnZWagAA/gAP/02AhGz79TRIvbhbm3qC\ne4TWFhpUkWm5KPhn+F5/+cSQtTrwlNylHTK3HBP6qk4z7mQ48/+8fz7GAN4+\nCDAUoMRYls7oDyGeCnuJLmyn5N/3r/CTW3S9Z+V7lU0+JAlo+h9c/5LbMjT8\nUhv2WIbGOh3aPgu3RsUNFHGdXNrAPgBj2QimRgpsZT/JEEMac80DWttD+nq5\nC4rHUh6HaojXtmcfqSLknhULIgmWF6VGLnGKeCpu1/G9Ex0kTCfNUzbPtErp\n0H4UWOgr/CnCy8cqffif2UgxHpm3xzM7PSPmdF/7W9UeTQxivxFvI8+QcUS9\nErMmp1jOt1ROd4n24ivX5xjevnL97rng19Bn063G1oRC9bziqZz9gQZOjYIw\noeMbNhxqcvDrti7Rb9XPBxdS9XIxLPLWEk+pc7nRicXSJKdAWsXxGBFwRoOY\n4sopOCnquy1q25jUqHWJc4cXGT38MfW2juLCamCwmawIOTCHOzR0Mi3VjGjO\nah6RtujU9kLPnrm8vo9KX6HEFbeD2KmTzo2sRQa4DCtI2yaq5DhU+4ivZYom\ned4d32gcwby90qshdvvVmItm6I+rK54wE+qnDPjR8/Xs1FtY5ou0f7+w9jL1\nOWVUBJ4XIYouBp584RumciJuGHQb/6agt+inmmIfkc/O6nspZYVHjq0cH4Qk\n4aUC\r\n=T27z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvtkxG7YY38G0UTee4QzSIQAoyN/D5E71R4nYMnIAtWAiEAnMOSltXR7OmLRBRPMCJl3MDswjyJ/h3u3DV1i1cacko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.a0ab8772.0_1586290153220_0.9399055281861051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-textfield":"0.15.0-canary.8d352305.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-U19y4VbS5riZBG5lwpZecpJ7PBDYm9KnYh/t4thc96yFCS7bxd8kvyWpTYK69HOd3ML1+nClvTtu7UdXRN/kmQ==","shasum":"486f8801c0e058a50f922ea838933aa40a724e0b","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPO+CRA9TVsSAnZWagAAA/IP/17RuSMnnJd2Wb/CwMVm\n+cjBQL9SWW+jqGIjl1+2fQBpCbwzJjqy0xbXl3Oiywj8YtQIgexaEOwFGhSS\nB0e1GlkTyUZiGa6Htc0ig6upcCL7Ojfnp+5n0U5ggjkymbFs6hijDs2YDdWs\n0ds2Ppfj7XfARhMYtH1Ad6OWk+GhPUGlaz0Y5+E9SIEpaTylso0y9g5FkI75\nKL2hf4zKhIAuL7L4T215Wq/jtB0EwOMaVWUdMhYRNcRONqTgL8WOOk7kMsQd\n8xRbY7tHXkKVbcgxxUMBAzaXBxvUv4+eNAaJXbLExyMMGlooFcroA5S9pgzk\n3QCJh+KpaY8p0UUS3W6AjtB/Q/8mdzG1os43mKa6NC9UEscePkpU2bRgZnJg\nP8KwgkCjAUdipvm8eOjMz46QoyoImE+C2TBZ7kwxIxQ63Z9wACErCDHK+XXQ\nYeCRinYNK37bJYl4HfGPD/88zvsFhcyWP4Tt1mOs6Qq8N2PZ6sBI/u413qZH\n4kklIEXGH9HNWo2u2Y9DTUsDU2FfnPBbXAbcyfm4oqo9Dri4DVElKE+TEcLh\n18Jyr6mKslUSMx8b/C6dRaXWiXAOWGKX3MZzDZDJEtjcmzIZpZYx4Ej5Ykn6\nkceRsDClBZjZqa8rEkFHTmWvpGlEaQ9LPIQP5/YcP22hdEG8QKkIkdQwn2vU\n9fDI\r\n=nobM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB2EnNBEzveYfPAhFMDlhSrN40Yc8uQc57yTqL6J1hPAIhAJccjS4Zsr7tJjLVJUzyvZYzNAcrdHZvN+P6cpcsakVP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.8d352305.0_1586295741872_0.024961367369127574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-textfield":"0.15.0-canary.31eac79f.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZGqeh54+YGDXB/2dSCe6DYr0uSnttkbuwW3tx1i4eoOrp151CPSBAa9lmwK2XeeiCpXKrOxrlpV56wgrPWkrvw==","shasum":"cc8ddd1544bbb3d70ce49b632e7cabf68d3b716c","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdUCRA9TVsSAnZWagAAXz8P/A6LuMuSz8wmIlEcYvM8\nNfXKPUaom2cfEa5S36F+jsm2va0gk+ZCvua00mClrQa6vxcpz9yhWKFqGGSX\nx1XC8u3TQhfH2E3x7khsYOeUeu1movDed+DGcGVvEqw4AugeqGsThZVUrDqW\ni9oR6djA7FvJ8W+MdB3Ah0SkHlO46fyY9tUkCZ+PuVp6jbdlvvaWAyJChVAx\nIPHESfKFbTRDu/5tO94nEszInSl+NCTFgNPaXPiNfX/zsfcZUWot0ziblm4Z\nG7h8sGi3fPxpcMRDNQzHZurK/lKgyvOF+4ZAA9BrdhOmegZE3JuUK8DDkFZI\n25W5DSZkr2AiElEl/o/ayL5SSXCBbuTXAmoAo4ZU/2WSgha3HxM35aWXZDK4\nkZQ1UtiZN8DduWKRHcZgofB6yHNU9lmlp5zu+mlQ7KBvfdSO0SQ5keV0uuJX\nWWOG5Wfwi+5Y+t+N+9+yVAA6E36asO5l7f5xysc6wkZpyc5tNCG1E3CmqJ51\niBaDfhKmi7ECqFyD2QTDuNLX8hB2LvIogJOPjhCWkQgemxfwVljECaxjaTH5\nyy+e3VwTYsp6GSc09CRsD7lVZ2EcW5Vu4nYa+ljJL+x0MOnRcwc8iW4H//wC\nLfvYJzEP+Xss3qKo5nun57xnqyU3uiDzBs731C7B2crFLyYAsOA0lI48vy7o\nem17\r\n=FX0t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpMEMqzB1kA0r1BO3C9k5uKwlDCMWza0A1NyrhpXP7KAiA5Np+afiqMiRhzUaZHOcURLe5L1ik+qIldaV606SYm4w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.31eac79f.0_1586296660310_0.11723103791721012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-textfield":"0.15.0-canary.ba05565e.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-b36U1IIdeWOP3pyK3Aid+fVjXO0GK8iV2lgpeilDW83K/1FX+SgLXZGcnypPNlGAScbMMfHM5kT7ZwWk4DtWOA==","shasum":"3af86339bc796ae8babca20cb4978bd3da5b9aa1","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgrCCRA9TVsSAnZWagAA6EAQAIqDXXueDRAyHoHlDdM/\njviy3qHv1QZf121gCZUxLD4E2UuecISsoxOZrUU6m5uZXFjWbS3vIuo08XnH\nViJy2GPIVtktUPrxIYpSbpxIqAHaVXZP3iqtUUkkSMVBoPgI//SZK49k0lXt\nsxepD/USdeCc8OZE5DyZg3/IgIiEPFU8YzSy+iZxJm7v21RT1YAAgLnXCOqC\n4mlb6P9nsxe/xdOPZL/NCvgz8YhSUtthIE1aq4ABqSCIY2HbxcuQ1XHTe4v9\nezqkgVjnZGGTtVrikHcUkrFv3sL8gvw+c0OyQ5X/RoJcDRObT8uagmY7P9n2\n3c/8EdYz9TAjFD7N228Xw/3sLidFEdpvpwsLXFxGuU4dsB22KHe+ELd63xoY\nAkAUUrR66I4hKqAl7qJxbc2MnnE8B8GwuAtgCLt57PHssBzKyXC0bkKbi6A8\nsK6crt4o/Uvs0z1lTO6eCG3DcxOaXdlr3zlC+RQG9cdsgK6RqhMe4Ma4bL9/\n1JWYYU/L4Vu370zSF7erGrXjXF6QmVFJ1r6qcLbGjIbgClwFwRPowSpr/ShH\nxbwkSFKhUZ93RYYNfa2uDNOfNZbmuS1aaoEnduP7yfDCtOJK6lnIIwqDSgln\naN1IwaydFCrKM6h9sRRwRVk58DlgK40GSUwpwQ4BmL8xi3bVvnBH1/e4lJk2\nkpO5\r\n=8VYR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTGCHG+z7MCzVtuCtm8XtyoqeN7t0L4ZfIp+3pNkAFUAiBtNOZM3hczBk1Nm2bxYIx0VUyBqlX3Wd9uLdHdE1Y/Kg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.ba05565e.0_1586367170236_0.6282620345623868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-textfield":"0.15.0-canary.25099f79.0","@material/textfield":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-kKgBGQ/4Cw8qJTpvuMn6xQ7ozELq9BBVAjNWSVYG+69zYFO7xIkmyBQuett+0mSxxkAzQKgItTS0kMKth+hQAQ==","shasum":"90877f2e99014850142ec0c0de13269bff7f40c9","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKPCRA9TVsSAnZWagAAI/QP/0+mbA6MmU5a2bK2WXpy\nbvcwCtcxJVEt9DkJV3rB8FKwkAwayYkjSpvqeLoxrKzqOzITLMve6J4nVuAs\nmlSzxXTBCVNqjH4YaksUm/6FFfbd181WmWhu6VBf3PKFpSkYOjKomdzEX+f6\nXrCP0WH21jS4dkeROqpgm4wqjfQkq1Tv1IOQdZl1yZsqmnzqrFLS3qOu+BsM\nCJBApq4ETQPhVtffQ5RPPsLRo6XWEbOH7vTDTA/ZPhjuWk6Fbi2ZnqXNgQ27\nhILKi9TBcfGTP9XGmc11n0jdUPo8aYMdoqb4GhYnuhDUj5Cr88y3MIh0jg3D\nHuvt16evuU8GuZhk7e8KLLlB5cDGitb22GMyNk5xV6dDQXnXSykJNYEOKU9a\nuFQa9l1C9qRP9IB496OZ0rD2EjKytPg6LjooxIEnTlpM4eglcSIrwJqeHoUC\nD8ei5shFozWeRKE5KZWcdqhatWB7YF+j0GXGCSFRNIWj905v1wblSx+QziyI\nERPQHopFf4YEPfBdipBuhthxZr002qWQeJec2S+L0xdRK2vgB+jSVZpn2lcb\nCJjPzv72t/mUFvB/u/sinaw57/nnb+A49+4UrCk0Dxse8N8yrz/MSwcrAxI6\n2TszgJZZAUDhrSBoAs/e/5tvUSYlO94HsClP2trhdj4wuGcazWJmmQUnQbIM\n8nKb\r\n=cpRI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADAk0n5petVTLRaS5dUMCaD9toZe4Y1XupbwqsX63ceAiEA3CNxIU3aZw7i6pgfNkwCLWt3uuu6+KvjoUgvRDfLOzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.25099f79.0_1586381454836_0.34297115388982924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-textfield":"0.15.0-canary.447e31c6.0","@material/textfield":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-L7ul3Gt9N6ga6KvZ2xYxVEi9yDYCjBBZXzEAyN6lrezz+AdJK9I81dPfrHsuQOKqHVhkvHzQPdB6oHb0fsYmkQ==","shasum":"5590efd23e0aa36c5cb1fe2cd35c73a9e5f8ad53","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":177313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejneACRA9TVsSAnZWagAAPP8QAI16mJ4WCFUXLwTlnEkI\nxjHSHxJDD+JHL/b9JaVs0VEAAvgUbzGmz7bZXdvVX8qGW4arz1iPy/oYq8vq\nY0OGsxjiFhVnoQLA9pR5kIJ2MX7bG88Zbc3u8IB3d42d4p3mQ1b4PUguq6St\nSRJRzvLeWNznlup9c4nlgPp5YQob6iNxQFOWnan0g3q+flZ60jM7sSvGJlCs\nWOtmsQ+ncl0NpbM5g9k51NpCBCC0dn2F+yj5m/+fPOqnkEEr9TBi8yPK0Ied\nLBBAhpLJP9MqhQ1tfoK10XKOjEGR2CvJj5OSFjKqSQyVrAPfi/ktGZrdNwYg\nWSlYlTTDGic/VpPyNygEg5pGNCgdW709aIWRbIrVJ1Xe4vG1847DZ/Bgvx6a\nmXk5pda7RzcMWFE5qlK+hM3fuw3GGdxS7H9HrsigzxBECqnrGnIqFt3rCf6c\nJFV7Tek0tHt8ABBPmw+8LDQQstmreiZA/ZAaH0zEgxOrcrl1hMTKMZGaIrIc\nU2+CDVBCRJeNWoU5w09LimbsQG6CB9zt09AUjF4w5UNYX+vYcfcITkLed4tV\nx5/oiViaHAWYgiimAUESq3ID2uVW9xT7n0Dis2QKQgV5QlzbWiYi48nP8mxf\nlQVAEX8FzQlosj3nBlhxuyK8e7JKbpVqSX2Sbt1wkudAtPFjhvk5ZLC2L+9v\nGbbS\r\n=iwGk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKBD2err3FeKHXX346OjYGtjftArr/HcLRlIqEFHpF2gIgLNZ3nEOo+Fgx+geqxwnnQL22TFZqB3nUw30uFfMnzj0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.447e31c6.0_1586395008532_0.013000497046840476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-textfield":"0.15.0-canary.d6dd84f7.0","@material/textfield":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-gtrA6HGmyzKrL04g0+qIe+cayKMKaBOQYrAgshReE/BVn/Y1XwQCiCaqH1veZ1chONcB/sgLnBXaZZtRUEsmxQ==","shasum":"c8d9e9beee5d088607fc14f086246e49c034addd","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":184414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmGCRA9TVsSAnZWagAAOVwP/0t8Pjdo8prKTR7+r7DV\n8I7yrhbHp0IfYomySrQY9TeI4xotNIa4yAtBorORpLq6TQvNLfIvfOp07Gyj\nhGFTyP4fdyg9RnPEpKsFnybxBx9hoPwtVVaFR4YGLRGPxqNP70IKV7Y/5Uwf\nwRF8cekhImlS694jE8aAU09a6/PI5LPT5oSSrt4/13dvLG8foMcL+slp/trt\noo70pa58dPpTKc+SARZTImouYhUTsHJNydxHndiBKNroKYU7TXg7c382M06O\nlk58pnnmWfb/mND6ykpiaPLsm6WRBzfzR18hZdBpctrHi2gg7VH2EpBeDPO8\npqErX46aw58MkE6bAn4HVeW8S2RB/wLc7hL0ru2dpnM/Zo+7oI2aOhtB5ttk\nMKbgALEtILWv5uW5YsEg4zPsrPr8OmFmWT9JM5qM0nwkGYWHzlcNYS3Hib9P\nuSBrMcEq8d2QGSypjcAv9+JKpsWNjZpfxGNuvdYXOgD2YAkPNBoToBni2fMU\nPtRuiiGIv0MhGCLg/mvw0IfDnU+3k4sur2L0UoTwXeqTDRuwfY0uf/ifllyv\nGkPzjxx+ALKqym2EJibBj4yBOMDx7wRudyJb77r7JiSOtrAd71KvVCOc3p4d\nLqrWHU1KZCoeK0YkZ78baSlyWLEI76CbTeoi4ZEhwg9IP9di5HG2dDAeFQpS\n7YSW\r\n=Bvq7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEb5kt66L0I5vd4FVEUge6xo743Bdc7r8YfGTgtcHJbIAiEAk/WxeLVkYKuiCOg3NbM0LIEO/6uvuBD+//3YA8HZ0dI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.d6dd84f7.0_1586395525784_0.5628081912042935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-textfield":"0.15.0-canary.9b03ee68.0","@material/textfield":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Zz43jUTbkg+YZnMbb4ZDP2oz9D/ch046ySNHHb4g4WSENn/jP3m6FYZByUnZo0qGbpCM7UlP9uVrlUOVaV5+Gg==","shasum":"8662ae137be985dcde7741b4b303d54db9944c35","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":184414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej399CRA9TVsSAnZWagAAIA4P/32iPcjeirLJVBlGqSfi\nISEcVS9rUX17241EzXbmJZB8acSdYFvAiyP9KlwkZP7uBPRCcM+MkMb8RZu7\nV/mY4jWdyEjTzfF2pHmWUHOBKvgQSkuwnG0HwNAwEZi/RMghsX4HG8WQk4/S\nGqGKGBOZXjvA1EBk3k6yqc3TKJYF+Bg55YTC6a1g6FwPh/ON0cIBsCMIeVS+\nlDqDLZVmey+FDvDbzeRLc+jMsycOwHdFosB994j6zqPFAg5FZkUJZfxkjbM7\n/ivQwSHa9vtEAEgaV1SroIOrmbHi6cSH1ZUw9nGpsNuGZ8/Sx7jh8nqmeMBY\nMw4k/3tSvLLqJjq9FRtpmiavJWjX458dKi3aXCNGnNqTSH0t+XVMVNLvXJBw\nQRO1DjlwmuDed645q+ej0ki6ASKz4fww2pj6qeCoKoR9T95LbKCT2jAWaW54\nEb6t+2vQCb7XIpCdecQOA+T6lUNtWDcqC7+acyIUbVlIUkuCIfdXjTsGRSiK\n6kfP4M+nEqZKho5KNSirM8w+wNr/jMgQK8siZB04kYCUOrxPGmEwSerhcRRU\nvu5kDaZNDzldtr7BhWwoyVFiG7XSGWK9IBamBmjmjYyyK6RJ3Qcbgu/clMjN\nXqEI90TMeTbIhU9rF5I1nVqG6N4ly02qSWRGG35GSS1SssBDWaFOKYEx0l5V\nmph+\r\n=W5E8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi3pIAzyAAXW5/oThYsTE2Vs9p9NhUwn5Edoh2x/uIQwIgd2C24dBdw0FfbQprpJ1UdKMqIVo/k0ZUgLFTrwWi6yg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.9b03ee68.0_1586462588810_0.882547204851666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-textfield":"0.15.0-canary.bbc25b10.0","@material/textfield":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-JM1O0ce6fb17nRiSQVpq3apBBilKrVN/nZi0HKcVjHqhg+RRGSjDwfDlhZwkOoNNFsL37AnF3EmSj6yUKGs6Jg==","shasum":"32d7e2274d92c30c47fc20d91857b4d1151185fb","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":184414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPclCRA9TVsSAnZWagAAOHwP/1JVy8N0s0Mm3diLsZFz\nt8CffG6j/qHjDZDpdaJ23LuUpT2TaXblbaQSodjOdHInlLsEpiYHDlvDBcYA\nykINXZfXhyRe252DyLwMf0AxoqSOe4FwYhFYXtJPxcUxT8E/83Gndo1jtinr\nAvW9+lSmikT1itu6u8mPgrg0rom/NlJ/1LZ7Y7beeBsUxE7xIxfJU4rd/OEG\nGKAnRCtv8mY0eVzPDBE/C/KI6YpnbnHGxGNL85p7I4q0GzxRQkCM/D8BbXHz\nbGn0sJA0WTy/GiO/TlB57bfWL4qJdvJoad1MHGPcUcyoJpvtPyy54dXOm1xk\nl+WFMmTwpyhTxIn+kFt816LdpV+EMT8N0FJ7oIy2dgIBck0Og1hU9hpfx5p8\n82y34p29ITEsI6zow1pKhyfTER0q3Y9Bq54JiE3GLJZMpwPauUqYRlwyvjCr\nvVm6mUXIZDHlGdbC1kvhrEKeqi5gBxBtBUQabc3jVxJmW0sINJxZFQ9h9tb3\nfcKzJn+I7RCOYsGKOSGlHDo7iqM+BBLw//lJScT50IFZ9Fy12R4ASXk+V3pS\n3tYStLHsDZwLvEnlosBhMqDvgeOGjyP7Acnr+3/2hAQk6P2aKbnTLGLyB9s6\n7OJKCgjiuAyS/IVQlCVPm1Cb6vCwsFz4MRU4OiS0ihoRwaxGDoBCzH0Fc+Kq\ni+5L\r\n=Ticu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDoFAA2b2USIZV9KKoDJrLnBw7mvHFs2nSnNqlwJqS8SAiAGsSTU2wr0opFyMUxQQLoUT7ynp/ZmMinjJaKphE/bJw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.bbc25b10.0_1586558756907_0.5892425455606431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-textfield":"0.15.0-canary.339cbfd4.0","@material/textfield":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-n6sbeZNiCkiDcPuqUfHVoS6mz9VC9ej8raD9biwdfNk87ZCEgL+al2RQEBM6dfzZ9km7MjKPJJPeM9BdCgV9UA==","shasum":"1c236215a4593c4ed143f626e4e69538e6089811","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":184414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0azCRA9TVsSAnZWagAAgUMP/1PMQfxEA1bGUsGGddcc\nzQAdfE1ycjB/Ju3kkCsLDFDNu4m9bGlxSf/RyogRUBXv1Zq39MbqL6+c5akm\nXkHWsJPIwbEhrAXuz36i3q7ti5OTH3fffcQfe72Y6B7AqJCyx9L31JElMm05\nkHrhnJ5GC97JRqs6xyV3nYvgSFYbjjVRwVaIKkAer1iwmCt75UU42J1mOTIu\naPBf3uoHZnFUpgHgmQ909SZMhOR1g1fY7dF9Ix0sC9BoyuG4ik8vXiRVfsCS\nho1GC4l4rR15A7ZSjfyTMzgYAgPWV4qBsBTS2nyD1suj9Tydb6j2N8oCSZ0k\nhVr6c84JWKH5LrzpxhG4epWGC8zIMM0FZZjZxsj6vTuXLgH4yVThoBc3SXX+\nsS7JlNqPa3WXQsHUkN8aojyk5lpsscpm8ogQoYzfun3z2yr/QdonEbK7DuGO\nFzkx4k8pWkL3ho6weUTDoEyR5UO8cbELND91TDvDoc8wQE8U2rqwCvVYfyrW\n6DZ0FRH74wqo76lq1S0C5PQ9KIXwnCkdFNlAQ9C07AFWzXRvh/Bw0oVtbtqu\nO3XL20bCLOOVpiDITH8iRp1Yw2rxjrr6Jqs0b+bgw5X8/kQCHGq4JZMHKitX\nCiFNguUSJqCBw6BGWO0z0xqW/kpvC1wH2VYC7caTHB7/GZPnbnyclLxwOLgN\na7C0\r\n=iWwU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYNp2ePxfrecPyaBUf3kNZb/0D3pIAkiuaQamsvDkttAiEAgLB9QrGSgpkbYy9h/e76KvsMAZTF2o7+DIkieZXiY4c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.339cbfd4.0_1586972338842_0.9986717704128354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-textfield":"0.15.0-canary.b74ff19f.0","@material/textfield":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VXYF9YtQvX8gR74sRO+24hpOse4ZzXY+JhX/8t/sy5/5ePcBDTJBVi6n/+k6MsVoeWHnAcv41PmDevRZIJzR8Q==","shasum":"73347ab2a901708b2834b6441271794f0311d920","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":184414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jbCRA9TVsSAnZWagAAcpsP/1i9fdvnja1NVvYtGN6G\nASGZQXlCydFWegW81quExhTg45K1Q6Gr7ITTbdi3nSBseTAQCJJMofMbKzzC\n54Xe5z4p/9xTuTylO4OTH2hkdEQM+c7xpiEXsH1azp2kK6r30eWg50M4vSwO\ng/jqTuIPyGtHzhRcNi8/hvTIpAEF8A2Zeaby1VLEMEJeo2zsVe0Tja5zmJar\nEJTDPwtTMmiTVxGYgWJkLxCt9SEDy6OL+ixmsvhnVoVuu7pWWrrYEoTBMd5n\n33t8AdLk/b1hy4MJ/nAQcEjY/SwmIevQHKM/5CCkr8OyiF8Znl5Sq7K7oIYd\nKKZPrATcwpsgDs7P+V9KlAI4knu4ycvUv0iVO9w6aEWrGNSNiCA8i9mhO7G3\nzn3VkDg3YqxaCSNa+9eOCNwH6H3bBLy1/mJz+FGldcW+pOBr4g3+46GhOwy4\nrZpL9vVEO2oaOWsFGxzaP8z/7cwcjFKNQDgFyXGfuIrcdoUG9tWZclj4GIxm\nWvsCEZT1NF5RCGBf1WX6z4o5/OitPxv78kMJ0ZocCi8rQmkBH0XJmvEw/0Jd\nsPyHRV8Za1+UvKIM3Tz1cwV50sjc7ck3vfPmYb92shdnGhTz9s6ImcDzKCNa\nC0j65IgfX2qRUruKpxsxehmzSWtvEUIZOBqNVBbwONV8lTVLA3YeP8eWn9zN\nJXmQ\r\n=WiPl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDaU7Q9rVi/8lDvNKi56wZqmMHjwBNXaECIzkhcTMdxAIgKV3CUI0w6MZ/qow8OSc7IuBhXoHRKniCoCyNXxlh6CM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.b74ff19f.0_1586981083230_0.871257106042792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-textfield":"0.15.0-canary.aaa16853.0","@material/textfield":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n\n\n\n```\n\nIn this example we first check the native validity which is invalid due to the\nmaxlength (the value is `doggos` which is a string longer than 5). The value\nincludes `dog`, thus we make it valid and undo the `tooLong` error in the\n`ValidityState` by returning a `Partial` that indicates what to\nchange in the initial validity.\n\nIn this example, we also skip an expensive validity check by short-circuiting\nthe validation by checking the native validation.\n\n*Note:* the UI will only update as valid / invalid by checking the `valid`\nproperty of the transformed `ValidityState`.\n\n## Additional references\n\n- [MDC Web textfields](https://material.io/develop/web/components/input-controls/text-field/)\n","readmeFilename":"README.md","_id":"@material/mwc-textarea@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-peIwY2MGzdQAwZiLor1TxzMMAt7fBLTbdhM3ufpqd0pPgx96A4y4FMop/EtqavMzbEC8MSDfyTRJNIi54S/NZQ==","shasum":"19c93091a16c107254a2ab4c48da25d05664b27a","tarball":"https://registry.npmjs.org/@material/mwc-textarea/-/mwc-textarea-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":184414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42OCRA9TVsSAnZWagAAPj8P/A/AhZYQ4nzJDXmzvCfQ\nkD9Zk/L6mSOOItyEwRCPknJ77SXy97O9vheeOOuSgUjKmqRlZdr/WM2ItEE/\n75RHB/c8qt22TLrymWEjhKlMxwUDHv2dPjO+f2p8DkGrRYALL2cQMRANFR/l\n2M/U4301AFrRjOKRSn9e1nQD3bZYsZpiE4juZaZDUpHuHdCiKFK8dYGOTmbG\nrNIS/CS5tQdYD4ZKl2w0IZBpO8wd6BFhqd4Es3P6JuQ7ATHWFLmvQdVjFzAW\n6VkVAN3uF+lIuawSFBLGNqGSnPYPJxOp/bcUoUy9YBN+OuLAv/J6SQAOm8nt\n/EMiQhlulncpTIeVuducPxzpwedgog8YM783mP+pEnDRPjmyUL2i3iex7rCu\nMLZaIgiN2Mf4ftbGX8Ue19qqwF+Kgghbk6wtAC1eYyeFBr+uoXwlFM32VgBv\nsOq5+syMrVtNHNuzHwBQgTGG9q4rRfkrRhQ9KyndnbQ6NBSHaKqM7ZCHwBt9\nEApq2FINsai1gj3gvW6yjlSK2w9DSJwzVKFvpln/UikAhp1CBtQkRcW/DkYo\ngfj8HVpCZi7b/ilP1jQOID1IOSrL2iEtNMDv7OH9aXzYch7vevz5/qsQ1fix\ny01LNnHmdeA10QNj39gNtOHUBoxJGxkmfvVwgjIO7tUQbY/hr/XwyBMCXjU4\nFhJW\r\n=DvPX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAh5YVQtYlLH05Q/c7wg6xfTgCc38favWGN+6mBTcb3SAiBctPwUAKefqpCrBTN+CT+9FUzRov53vmef2iFn4nvNDw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-textarea_0.15.0-canary.aaa16853.0_1586990477566_0.8491124278297766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-textarea","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textarea.js","module":"mwc-textarea.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-textfield":"0.15.0-canary.826b23e7.0","@material/textfield":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textarea)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText areas let users enter and edit text.\n\n\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n\n\n```html\n\n\n\n```\n\n### Helper Text\n\n\n\n```html\n\n```\n\n### Primary Color\n\n\n\n```html\n\n\n\n\n```\n\n## Variants\n\n\n### Outlined\n\n\n\n```html\n\n\n```\n\n#### Shaping Outlined\n\n\n\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Fullwidth\n\n\n\n```html\n\n\n```\n\n## API\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ------------------- | ---------------- |------------\n| `rows` | `number` | Sets number of visible text lines.\n| `cols` | `number` | Sets the visible width of the textarea.\n| `value` | `string` | The input control's value.\n| `type` | `TextFieldType*` | A string specifying the type of control to render.\n| `label` | `string` | Sets floating label value.\n| `placeholder` | `string` | Sets disappearing input placeholder.\n| `icon` | `string` | Leading icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `iconTrailing` | `string` | Trailing icon to display in input. See [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon).\n| `disabled` | `boolean` | Whether or not the input should be disabled.\n| `charCounter` | `boolean` | **Note: requires `maxLength` to be set.** Display character counter with max length.\n| `outlined` | `boolean` | Whether or not to show the material outlined variant.\n| `fullwidth` | `boolean` | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.\n| `helper` | `string` | Helper text to display below the input. Display default only when focused.\n| `helperPersistent` | `boolean` | Always show the helper text despite focus.\n| `required` | `boolean` | Displays error state if value is empty and input is blurred.\n| `maxLength` | `number` | Maximum length input to accept.\n| `validationMessage` | `string` | Message to show in the error color when the textarea is invalid. (Helper text will not be visible)\n| `validity` | `ValidityState` (readonly) | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the textfield.\n| `willValidate` | `boolean` (readonly) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties)\n| `validityTransform` | `ValidityTransform**`\\|`null` | Callback called before each validation check. See the [validation section](#Validation) for more details.\n| `validateOnInitialRender` | `boolean` | Runs validation check on initial render.\n\n\\* `TextFieldType` is exported by `mwc-textarea` and `mwc-textarea-base`.\n```ts\ntype TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|\n 'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';\n```\n\n\\*\\* `ValidityTransform` is not exported. See the [validation section](#Validation) for more details.\n```ts\ntype ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial\n```\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textarea passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textarea otherwise.\n| `reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.\n| `setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.\n| `layout() => Promise` | Re-calculate layout. If a textarea is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n* [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)\n* [`mwc-notched-outline`](https://github.com/material-components/material-components-web-components/tree/master/packages/notched-outline).\n* [`mwc-icon`](https://github.com/material-components/material-components-web-components/tree/master/packages/icon)\n\n| Name | Default | Description\n| ------------------------------------------------- | --------------------- |------------\n| `--mdc-theme-primary` | `#6200ee` | Color when active of the underline ripple, the outline, and the caret.\n| `--mdc-theme-error` | `#b00020` | Color when errored of the underline, the outline, the caret, and the icons.\n| `--mdc-text-area-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textarea's background filling.\n| `--mdc-text-area-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textarea's outline when idle.\n| `--mdc-text-area-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textarea's outline when hovering.\n| `--mdc-text-area-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textarea's outline when disabled.\n\n### Validation\n\n`` follows the basic `` [constraint validation model](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation).\nIt exposes:\n\n* `required`\n* `maxLength`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n* `validationMessage`\n* `validateOnInitialRender`\n* and `validityTransform`\n\nBy default, `` will report validation on `blur`.\n\n#### Custom validation logic\n\nThe `validityTransform` property is a function that can be set on `` to\nimplement custom validation logic that transforms the `ValidityState` of the\ninput control. The type of a `ValidityTransform` is the following:\n\n```ts\n(value: string, nativeValidity: ValidityState) => Partial\n```\n\nWhere `value` is the new value in the textarea to be validated and\n`nativeValidity` is an interface of\n[`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\nof the native input control. For example:\n\n```html\n
![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/standard.png\")
\n\n[Material Design Guidelines: text areas](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textarea\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textarea/images/fullwidth-outlined.png\")
\n\n```html\n\n