{"_id":"@material/mwc-textfield","_rev":"714-3674f316a5c0dde46b30fd46bbabf423","name":"@material/mwc-textfield","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.7.0":{"name":"@material/mwc-textfield","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-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-floating-label":"^0.7.0","@material/mwc-icon":"^0.7.0","@material/mwc-line-ripple":"^0.7.0","@material/mwc-notched-outline":"^0.7.0","@material/shape":"^3.0.0","@material/textfield":"^3.0.0","@material/theme":"^3.0.0","lit-html":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","_id":"@material/mwc-textfield@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-cVMwAmNgqpbppsgyxlpS2Ga452/5P/67k8UccBiV9ZQQvOg8S2SqxM4ijiSFiIOkC+ppLPiBEk6mtzd1NDPaUQ==","shasum":"b07d586dc057c08e3820fc9a075073f9f8f78c73","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.7.0.tgz","fileCount":20,"unpackedSize":245943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9pCRA9TVsSAnZWagAA8g4P/ApPyGlrqBZu5DH5tA6w\nOmJx6RuDkGEq+S/nQ4yH0uxRIRcQpP7aATvZNaNU+1dVnRNV0CVRQiNZl4fO\ncEvkjBY+JFBY6YXt7sny7XB8i85pXRhgkwnopxCjvQ3sSTppwDPg2rHYoJYU\nrLQ/jhlxlrcpdt5Yoo13q2hYoKycOP455Yat3M5KPi58osIgc+NNoP0yop+/\nh4BL7+VVpx9D7eNfq6ye5P0DCwpuPlvwH9MUbtDfwRH2KeV1wWJCU6fIx9rd\nlXiTme2VzjpVDZvzC/B+0VOJoUSbAO7aJsfOyh0uX8FNmpOv7s6DZrB/s5pE\np7S/qDoxTJiSGK+mmRX1vZQCBzRtkVCmubvwkewEfUtdFDW3PUllQDa7pkB5\n/BIvVagTF62IE+UZKy3UQ5fnjiG32DmLcpCkKlVZvEYq3D1V+5qkTj1b40oh\nwzrwrJBYnKSxmkw/Tj/8xi4r6itxzKMfRXqhP0YJ2msy2Kh0TuRFPlC1S4xs\nYTiIth+4vX7iFfvVEqKrkky574XSu1NHnCdyvVjf1NHe0AyIvA0LlBNQIc9x\nf2Bs6Ci0y1hDn89pufsgsToLp3Hu/f55i70W7TW/o9vgWdQ5uqmfd+D4McJ2\n1f6Gb9dC/uQ8vJLLAAH87waNHy4kk7aW3WURIh+tjDB0cXphxoEqa+aisZOp\nXPwL\r\n=MnHW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3/TXP8sS7Yk/2TX2ilWQmaffTypRAqO7UjfPTJ+vwfAIhANydk9vwjNZ7dw8vlpxULP2i7lqLa97+WrWKYRQ8xaq7"}]},"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-textfield_0.7.0_1566941032587_0.8041948122203697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-floating-label":"^0.7.1","@material/mwc-icon":"^0.7.1","@material/mwc-line-ripple":"^0.7.1","@material/mwc-notched-outline":"^0.7.1","@material/shape":"^3.0.0","@material/textfield":"^3.0.0","@material/theme":"^3.0.0","lit-html":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","_id":"@material/mwc-textfield@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-u5vdlJZiuwfo/cwI8nUzp6on+7RxotLc3Qb3qR1Fp7zFoqHtMuJpujgGhRJIqEENWJt/CGPJ6Da0UNv8UCky1w==","shasum":"8b2629c71fa22abcb00a9031726795f5219f6e86","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.7.1.tgz","fileCount":20,"unpackedSize":245969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezrCRA9TVsSAnZWagAAtXQP/05iJ+tZvWddHMnEuYIX\nah3g6AA+qz4oqmkyeYX03CPYBda4QMOcUfgObDlyBSjcm8fz9xyKpx8hyYfm\nIYahMrqYwNYH1OXXLdM5iQw6R0RCbIyYlPSEysu4fzAgs8FqESm+j4lG/Uee\nO2n6d9orzICm74prnBAVSq7r+NOjXS0C38PjavAgjgpUMCrEF1eTzuZysYhf\nzgPaxWcGi2ywl5gF16jjb1ytOqyTArOXPGwRl+AJHOfUHZm+OeDc0J7EOx51\n1MUMHiitnc394hlkt6lP7W4RK3eRNLWvRLeTgStzQmb6k5oCPVMptvjCBqUj\nX6G7E/k120aaHGbLD0rpmKAEeKRFX2REl4btR8KIZmhRMMR4dOKMtPCvw8fs\nNT9Lb4QxcLHCNpjFMnLVcjblYKNnvlUjnfXrxHhiz+76zegCs3S5fHYlqxaZ\nlK9cBMjIwFaZehLzAwfpNXbFWea7FkzUeMAyl/OuaqpUs/F12pmLCrR92uuB\n1DACCNXJgx+JW7mSKPK/wkV2aH5qimCdYbXP0E+XtJowJ9PQe1zHl+8gLzcI\nnjN0ukJ8uBMRTBS+KqVPOlQOGfPTu+WWNBR3mcmEuhr4FBFLFJgJgCIyiLAK\nS29YFQslKxRaC2ILM+s+wAkYp6nuMAPHRi0XuempDlMr4iIS+XMOm5l4WI/4\nOL0g\r\n=Piaf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn/K+wNFcVtB4R7mhgdUngqfyNqTJ4RTjtce29Royt0wIgJfTOjw8wOEuDJ2x19C8+O7/8lPzNOv9bPqZjY9ZrJXc="}]},"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-textfield_0.7.1_1566960871280_0.9462805966062828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"^3.0.0","@material/mwc-base":"^0.8.0","@material/mwc-floating-label":"^0.8.0","@material/mwc-icon":"^0.8.0","@material/mwc-line-ripple":"^0.8.0","@material/mwc-notched-outline":"^0.8.0","@material/shape":"^3.0.0","@material/textfield":"^3.0.0","@material/theme":"^3.0.0","lit-html":"^1.0.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","_id":"@material/mwc-textfield@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-WMNvvpAa/UPi7t+465idlYnaiPf0eRN/Pn5CILOmZvc6Xibse8ivFq+jWrqUDm4nFOKn2pARcOM/w242ud92FQ==","shasum":"82673cdef0f028dc4cdea9a588f26cd66c5a1c3a","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.8.0.tgz","fileCount":20,"unpackedSize":244992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+VCRA9TVsSAnZWagAAHGcP/2C9yThxv/oVJe2w1Fy7\nDL/iPncQ1V0DSxNXTAlmSf2vE4cowqnBwRcBR+kOO8tBMFWdJStyzeWpzvkX\nos1w9QwnHEVljL03BQuueCGZly0Z9KG6xCGQvN6IuN6PLmJcF5jGkvNajvP5\n/1YUo7QqFYi5243ufrHVc6m+Kc03aSs5wVb/GuFvBXMU36kb5ZI7Vj9yKMy9\nB8dtc5yS8Qe0fs1ZsZMF/96HAVJXI0xACIKZpuuJBlXJmJcC7uK7AcBkRMGg\nBh5CBFxD7SDnoRP5Id3I9letJSch0jLE8aPhwvpYbK79wQ8ujXl3EhrimqIY\npoBc0BFAfp88afcpm25jfhBdREraBgQ9gwQc0fr12MyssQ8EHu7q8nFpHn5g\noYpcJUqvKk/ICBZ6QQDipFEfveVaSnhs5yM40TJis3Vdc1ybbUMBOL9Jib6M\nKBcvY2Thn89d0DS3YrrrFeBCRE848vJJ0fKAzMwnV5Hqoz8jG4kFYRXYCPjL\nRFxmKB1U0XWKmQ6Nqt+epHTM/rGP6II08zlYRnBiEBaGm68SYRc4cuJmSo8n\nSvRC+N6/276OuFd757eR9Zv+gsb+gBDKxRm9sC503mmrSArzfvqWlvmMxIAp\nWMp+nQcU4YoVshef5LyCyBqu5ermOkqoEXK4rWDLLkIOa8xICqnr3nt0Ptak\nfeGz\r\n=dVb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgfRr84L2Uls8AklC9oQW1ML/bUoDQQm7aqIq53LK2qAiBZly3bEzkilR10QG43JUsSwtoJwC4YePWCGKGUyx8A2A=="}]},"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-textfield_0.8.0_1567555476543_0.9122107904335961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"^3.0.0","@material/line-ripple":"^3.0.0","@material/mwc-base":"^0.9.0","@material/mwc-floating-label":"^0.9.0","@material/mwc-icon":"^0.9.0","@material/mwc-line-ripple":"^0.9.0","@material/mwc-notched-outline":"^0.9.0","@material/shape":"^3.0.0","@material/textfield":"^3.0.0","@material/theme":"^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-textfield@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-qisrvu9KbLyAc1oAFw5y+aw7CAzWK9z+giHzPWsUNCtAfhEoWRJwVC4NljrHw2vH/4B3eOgaaUT+wbqlw10jWg==","shasum":"f30204cfd46508a0354a090d05647074f65fde5c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.9.0.tgz","fileCount":29,"unpackedSize":315785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeUCRA9TVsSAnZWagAAFssP/10e7wQih0SCZc4oYFri\nPmLRoq1e/bg/Z4BkqnwoNGCwiqGUvATrUy787CXg8fyeT+myIYDtosY6oi1+\nqyTZyzeERUt/tOC90daPOMaQngOmAtpmZJ+Jj7IkqvSDo3U9pDUUXNvu0KO/\nWZKESbRNtkB/AYrTNmNrZadOcSQqx9tt026j6JKhy9qr0oZYfx1roJri5r8I\nbKhnAWRxMkK5Mr6QiIr1ehpMqkdyDMMrY9gNycucba8uC0YTx4ykldNNKDWr\nKxLbH+E/j44LbxpqgyAaRrQ8KiIrth0w28idIk/cN3GKvPuSaJRYgDsCJQXw\nxL5EPcCTyJ5qaX5Ggndk6t+fv9dzaXlilsdZF89s7CNZUWICljGW1hspjUxG\nP+RTXck8nY4hBNkDTnX2eqYp7adx4OjiDZ0oyXO1Fg/gAuo9lP318exFK4kD\n41LcUoWWCKa7EiZlQLuHgck/cvf477LuwOaECfKafiaWNA1aZC6efQ7ndRLp\ndWlvXeUPVFJIiBTXaTKyx4n5/udzAOQ/4K5ZmtdfL/0X2Vn1lNWeHTspzSP0\n3A2zR/ypbqtmvB+kDZlJ3az/+2Juh7o6uxJZmZrcL4jO4ZoY6sqLPpZ9X01m\nHKVuimY7FkOg0+xKEGyH6gQc5JY9DcVLz7pQDSAuQ4ffCuDvc65PmwHHGhn6\nu18+\r\n=B5uB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCzlPxHv68D3U6/oWu3cLm4h4Q0vmlOWG6nBda7m5tTQIhANxtyDYs2GYWPu8W4XNSFNAKI6lWoj60I97C8N/Bai84"}]},"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-textfield_0.9.0_1569548180174_0.6843792752313018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=4.0.0-canary.e851d4f40.0","@material/line-ripple":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","@material/mwc-floating-label":"^0.9.1","@material/mwc-icon":"^0.9.1","@material/mwc-line-ripple":"^0.9.1","@material/mwc-notched-outline":"^0.9.1","@material/shape":"=4.0.0-canary.e851d4f40.0","@material/textfield":"=4.0.0-canary.e851d4f40.0","@material/theme":"=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-textfield@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-03CFWGyAqjNGnNDUzUEkDY3vNrx/XLsKakh0iNgREQmOLT3iybOgVUmSZ21bcDxSnQd7/Fc4gclzCNVsPhI6xg==","shasum":"3024d243d4f48b80e94241fb403355070e4ee6f4","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.9.1.tgz","fileCount":29,"unpackedSize":316709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm38CRA9TVsSAnZWagAAW5AP/iqQXBHQqSahSpQgTE5Z\n7Ny2M1oLxr0ej+RTKugZqNHSTZxhUJiVQtBXqKaCJl+l5H7RmJmZpI0/JEbL\nOq5N7vkHB62Lq5I2OJg/yngDRszu64Kbz2lrB0DeFJpzAa6v2yzNJWMjz2LA\n9+4VeYVwrPsbp/Ym31RkKycfBsDVjOkzUYwTQk8+0csFc1QxGzAWKGjOATEo\nXzCFEQVelN0bBHkfN1pEaBLP8clFhu6nID7widvfrI5vudiIg2pjDSfAsQfN\n4uYRiujm/0ghrVGM8oQtkxc/jpYQVYNcdROY9dvTgezLf+vkSnGpF9lg2TmT\n7frq+BLhR753pOjEq4CUh+Mry+3zsjkBsrKpdbJ9+JNkGSoh1MAqja6DSdwI\n9FJb8pTGmKe8zUApOaLPIQRxWhilvcswR5/EaQnhAS9L4zIJimVj3ADKzlQZ\nf5sKlMPNDWpwpTbWNHlf31X16eP6elfcahWfjZOoN6vzkKiD8sAU/3eXFCLY\n26IZwpvmcXYhyYGuBGoEJEQhfIhVOROTCIzjr7VwLa1aVbqlTnewDZOHdvkc\n/VVvjRTWzitOpt0RBx+4rQl/LIj3BHejlS1lhquL5/g6QUHmHhe71EUVOMbV\nm564rwexG+qcOFmVKMjkVllLJJEfxfv1U5WszlSRx87fKnaY8s3x+4MJVH85\nX2zp\r\n=MSUw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC22ZV6vc4R8UDqLEEyejbc9xqfNfO7VvCrJPcfjAxmSgIhALemflt3mjQcOzC/cWzFN2wF/oZzELNI/4e/yjHnA/Pa"}]},"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-textfield_0.9.1_1569877500096_0.35061057812528373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=4.0.0-canary.e851d4f40.0","@material/line-ripple":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","@material/mwc-floating-label":"^0.10.0","@material/mwc-icon":"^0.10.0","@material/mwc-line-ripple":"^0.10.0","@material/mwc-notched-outline":"^0.10.0","@material/shape":"=4.0.0-canary.e851d4f40.0","@material/textfield":"=4.0.0-canary.e851d4f40.0","@material/theme":"=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-textfield@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-5HLEhcosLrCOJLJBpB9BpqpMqiWl8xtjBIoHs4SFUiqg87wbQx/qtSGMyP1U7q4TfPbvcoRQVreqrYbwr3pxOg==","shasum":"bd67a49e4b8329ef8577881467bcbe6fdebe8817","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.10.0.tgz","fileCount":23,"unpackedSize":276475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAYCRA9TVsSAnZWagAAY6UP/0RwEb+RyyWHESFmcv/0\nwuMZzuCJwoQ7IPYIV5/zCPMb4CdhDyYz82cneHKfDgc38dslacqJiAewo6B9\nlX85tVJhZw9q3JmMKSkv8Lj67YasDhzee+DVoQ8DJdIZ8TV0u3O75PXDNroa\nJikHdcDyuIvoMVoFI6jl8mbSqK84ED7lAMtso4MskVRg7tqEiSVxVf4Eu3kd\nO6rekMNI/ytKBtlnPs3rsrNE1PO+5JrdUqEQolVLGJFyjDVLtIBincfAah5S\nc2iIohAMZQ5A0UFw4dcRMiIsH9fUKvZ0RnzUUeXAwsTo9uoytdC5L/S6dVQp\nEePWE2H6FaMU6qoV76l8bPEBiJGYy1ebeaRiQYSAzrq0105VZ63e5nEvdErK\nfFwn0ujhfVq9YJNLFNoFHz0sgAMoIw6hjrLsSTMGm+aBLpXTjEdrToc0HUUY\nRrRgTJCm4zhlbZqD+l4kIOz1cIWcgkmICAhv8j09FBbc1oBq846c/PUUJM0T\noUK3hk3wYmSCfRl70n5C0zwGUTGsTw9aZd3SUk9+3NGpG7Esy/H+4wLXQlSb\nElj5/jzozc2F66bnNVfzNVpZ8hPR9tayeXx7aKGftUnVxxWIflcw+WA8e5qT\nPcrzqexEU5fjqixW820uNT21XS7tkH73YkQWOYArH90fgSabLka+8f1oFSVs\nlHtK\r\n=002/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+NmrELi0eGWmCM+M6QwYEuxy7qSUIAWvd+ywAlFOH4gIhAOuIC4C5rrjHfu4hddKx/qNat8Asz46W9FtxmHUO9UTv"}]},"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-textfield_0.10.0_1570836503416_0.884633306897346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=5.0.0-canary.5729943ba.0","@material/line-ripple":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","@material/mwc-floating-label":"^0.11.0","@material/mwc-icon":"^0.11.0","@material/mwc-line-ripple":"^0.11.0","@material/mwc-notched-outline":"^0.11.0","@material/shape":"=5.0.0-canary.5729943ba.0","@material/textfield":"=5.0.0-canary.5729943ba.0","@material/theme":"=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-textfield@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-JvbQ+qCKnpwdIhDUZ7KoCHbf2eqsaFKfkdsRBy3OjqWKY/w7D0FMkhyC/pbQI1AeyLGunOmtS4Qct7U1eUcPGw==","shasum":"c9fb2f8d1739fe602d92c2276d8641c10f35e7c7","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.11.0.tgz","fileCount":20,"unpackedSize":269062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3vCRA9TVsSAnZWagAAoiwP/jcZV8S+MXF+t5bZvbyT\nblEwZHxzIoNUQwpOArJce/1dvHdIQAYMjoDrUiyyNgdVYP217hM3WrL1BBRf\nRM6lWfTxBUvaunwUjNv6d3GNFS6Zo9aed62vKw0EF+el358iTuaocfHppa/z\njeOMD+DFBcwT0qnOQ4/qgDlKDhAAmKTAYzwH9O88dkvR7ac6K35CHeCY2HOO\nXFGikr1SnC5wc7aBBgiRj615VDd8lB/YywiGdYeJWhTp6NjxFOYaGgmFod5k\nC+cqfpqcUuYrzKQcObrZprcCggwt/H2u73dHrDsKtBWkgOE+txPLtekZKbC/\nGJDxiHHYxoaSa0o1S05BXTu1igHy/BuO6zsWS7MlQBeXP01/ZCseGuN5hTIM\nBCLGDI7maIdEH0kWv2IfE9q1HhuJfmm5elrdvvzyzRdEYhLI5A+xAUffSXyS\nO182ZnVpYGDAQXzYvmLckFHmm4StnpXVGg9WArvScAxj1MP4fAAmizmp8BHf\nyTNRej0z/v8hg4Gb3DtY2B+2LrLuQ0SbeaQIvKrG1CFDJfZNDQVYf627hQR8\nZINYiD3RaYjH3wuEUhaH3JUAgSVYwsPCSEOctWPonXbeN/AGMMDujlcTHCMT\nj4KFkZpgsJrcyGF56MsuGK9ObEEhdVigXjABYFm1eJImOm1eEmEQ2YXPsPfK\n1ouI\r\n=A4xB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqy3XZslGcL6P4oExICy9sWkh7MOKelpNXWMsq591PdAiEAx6khaNNqPOoB9VmD6+OanHWXr6NqNUDyU8DjroTl+ZE="}]},"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-textfield_0.11.0_1574804975166_0.8333979409634713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=5.0.0-canary.5729943ba.0","@material/line-ripple":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","@material/mwc-floating-label":"^0.11.1","@material/mwc-icon":"^0.11.1","@material/mwc-line-ripple":"^0.11.1","@material/mwc-notched-outline":"^0.11.1","@material/shape":"=5.0.0-canary.5729943ba.0","@material/textfield":"=5.0.0-canary.5729943ba.0","@material/theme":"=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-textfield@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-YOXNfryuaNcpnBX4ro+lKbJNgYqGCVAhbruJS70WdRTZv7V2I6ICz0pB62jWC+1QrJd26rX+IDLMXjm0X6cvlw==","shasum":"223b97c5278c9c37c01f5012335713341568fb52","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.11.1.tgz","fileCount":20,"unpackedSize":269062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK+CRA9TVsSAnZWagAA/igP/Aw5SjCynfob+kVYmFPr\nkDhrfd2O7CVBcS7CVyyRMLmj/jeLdLyt6APaUbZIQsE7oajw2N/nB4K20Rs+\nCWda5HrO65ZuPRkj7suwDLz2BcFDxweD5aV/sq49sjyrGZg8I1H7U0raRrlh\nVUArp+41hVsK+MpiaVksQUsGE6el5F60lAYSubGHdtZNPfDSsceQj4cONDK2\nryvNCn97KZwxW2k9ygcm20nThcoEkrWZczoA+QhJk4gXoRHHGlo1HUKc+g/9\nOJZZoZgUe+zKXpvz1HSyCDP5X1T1CgYR2xHR8bIVasPAJam40dJPJ3BPULrF\nLyRn6x7sBAxT4t+C7gggTaCtFPpd8vrNXYvJmRgTin39Y81hpGiD62JouB3m\n+7HGFMSzVcpMgTDAvimURbuvuNh2ufD9u64fci1eAb85hHkhttKOpkA14wrM\niP2MLaK9YJGeucqIKSTOsQ9Yf1Hxw6s4hfdGKUmYfh3Vri8CSSmDNUurG3rZ\nMsZrY4biKdavmrtsnxYQhzhlEWxPvB3xUJogCf059uGpKUzVG01I0sO6lqS6\nnLQvYQf7Nk7l9rWZIyBTdPrGNzRg5bzcVYbwJVUltE8TKFBPKrjjkMX+Bgt5\nyYEB0r6SSBwcHmJxtghPen8T8qAg8tcyQdw2yXOMCa5i2+OtTF2I+Y+lNa+y\nHqRe\r\n=hkmx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxtetUCKLDdvzIiLBQ7Wy3q8VZeYvRdD8fAeTURvUvswIhANciFO8ActR+feez0f4/AP8LdJoZXjEpk9iH2YC4B0oj"}]},"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-textfield_0.11.1_1574814398439_0.3444754107187471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=5.0.0-canary.1c494e567.0","@material/line-ripple":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","@material/mwc-floating-label":"^0.12.0","@material/mwc-icon":"^0.12.0","@material/mwc-line-ripple":"^0.12.0","@material/mwc-notched-outline":"^0.12.0","@material/shape":"=5.0.0-canary.1c494e567.0","@material/textfield":"=5.0.0-canary.1c494e567.0","@material/theme":"=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-textfield@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-99wvaVT0EzsBXntG7UTouyMXs3MOWgCjCph+A6bAavv3EyGGNYMItt9EWBYBWazB1keDQKP8yFrXwXpXlOQH9g==","shasum":"56361a936ee9dd940d80ee2efa10f30284f23858","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.12.0.tgz","fileCount":53,"unpackedSize":488639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkqCRA9TVsSAnZWagAAFO0P/2d1tFiCEO/vgCSD4wpr\njxywip+RQlLXzrzwUnM6q5jmD60XZZaqIrNW++XstBL0yNCljAZSiAJr5mi4\nx8grKcWhHlUmVs9GUqp/CaN8HQtojmfb7y74uq1EpVwQC0XXpX+097Q+2+tl\ns7A1M6l0upKQED8dUeYIbx9ohE6XuPk3/oypPMvFIu8pvFKD/SUMUJ3CF2nA\nyvwLad09BQs0tP/tPYMRjIkoaVy+fHOcKQiPfbQS0sZujyWUrMoaNTm3dTiK\nr3L7J8Rgy0Ax0xFrunLG3hkRIDTYXJldsGReb9DtD5tyEimXh1JSKr6OZvhK\nahy1QSNHQDW8x5jAeYb2RNqQdcCV37FYgZEll8GmG4KOD7MFO+6TDuBzWxWl\nO/lUOuAvNrWt7NnBfiIuDNBFmUk+tVpiP48CaUBbQaL8ATxZ/63uBSzCgPFj\n+YJ9m65R82PEiFPD+yezHNJEHX3nXjAE44YvtWfRlercUuZt2HpVDvfVkemt\n7m2N3L2PgsTX2f2fPTV/0NwouYc3H9dTca3Ie5zLQ7UB+BgxFUaHAn31HP/H\nR5+jNZlDZZnFRlc5dggHSVW8QoUi/6HUEuwnQV+1W4AEurA6+qbwHwcCLwfe\nhD3il420EAyvdwPf6jHzEHOCBmCasTvJ+qUzJfo41ArRjkBFgog/EUhSIa72\nccrA\r\n=q4Qy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKdtgwV+efDSDSJk1aLclL1gAOhEZdtyAWjfJCnhLwIAiEAqGwo+CubX/rCx5Ej0FH6W8cWOV0pYZJJCf635p/wkrk="}]},"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-textfield_0.12.0_1576626474385_0.30475281493259043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=5.0.0-canary.a1a0deb3e.0","@material/line-ripple":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/mwc-floating-label":"^0.13.0","@material/mwc-icon":"^0.13.0","@material/mwc-line-ripple":"^0.13.0","@material/mwc-notched-outline":"^0.13.0","@material/shape":"=5.0.0-canary.a1a0deb3e.0","@material/textfield":"=5.0.0-canary.a1a0deb3e.0","@material/theme":"=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-textfield@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-0cOgJOP2hIe20NGRDNkl4JEyo8B0fiwdxKbU12LhDZrCI43qQnXzeAn1WkRUgwMBo3RS9AXKCBSMOdhrZ0tz7A==","shasum":"d0a26a93cea818587166347a9f1ad05e54174c10","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.13.0.tgz","fileCount":23,"unpackedSize":273329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPcsCRA9TVsSAnZWagAA1gUP+QHG5NPwb3+62gx4jX1b\nJoZW1IuNhn/K8RV/8w9EVHjfFDH7y4htjq8VuOhEuAgHs9euKRjAaO8TS17i\ntSyUO5iQa7pr/eX5fDH2bdH+Vr/L4hDo9OL3T7vlTzgBx59oZwOMk1fD98LK\ndjpFocbFwZPkIu4HBdwyMtOjfmEL0mQMnSe14uhrJ+XoYJCHZ3ImqV0ZzhF+\niOpx19Dbx2HAs0HhXwJGHwF0Mothk68e+ydC7i76iTmVqVoH0r978BsQgTxs\nYIwXridAp0bj1jYBkwLsu1lVtGHQ6qL+PURJoHkhi3tbZxzrqGpWhmBWiKqP\nebIp8TDODNZ6aqAm+aLgHe0Js3x7z1j+lwGs7FGGeTUaVjgyri8rbFPohC+O\nQ/TDLRx5U4oPftLyIJIqkBUYkPHkn/W4MuousABoiLpX/4eRcSBVkrbbLbj/\nRM6js5kFuvREYLHak1yaewr/3EdqcS9MyV81x+8Ldrt9gzpW8ZTq1Mc62OFR\nO/cmukIFJ5S3TFIndHomqMs39GSTf8rxHN7OQWJsjQBg/3o7T9NjlIJoIwy1\nnCBrZuzq7D8bcCN/hc4qxJd+5AaPHGp7K0FGtvfaaK++17MOm+fBhNB6HRyU\nbY8v8P4mMwye2K+Yx4Wdwmu4oA+eTxTdiXHaSw1uSWSMSeeGeCS5cLRb4CqX\n307V\r\n=huoW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFidODaQN5BpipKtzjTjDEWOXGULyBT5ny7NWkuo7+FiAiEAxfOvDVxgP7FQ/rklbPbKv9BaKyvWq1wCT3ocieUWKzU="}]},"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-textfield_0.13.0_1580791596295_0.18442698224628762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.781434a92.0","@material/line-ripple":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-floating-label":"0.14.0-canary.f790f713.0","@material/mwc-icon":"0.14.0-canary.f790f713.0","@material/mwc-line-ripple":"0.14.0-canary.f790f713.0","@material/mwc-notched-outline":"0.14.0-canary.f790f713.0","@material/shape":"=6.0.0-canary.781434a92.0","@material/textfield":"=6.0.0-canary.781434a92.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dBhVhNDbtsUOM9Djk/X9Zs3E7W4UAQ2Xrci2ZqSNjZcch/0Fh8MQhJMAEWFj81Pdo8uWCsRyCS+Asp9qDf0wuw==","shasum":"c28c120007b83da24215308967cfd57553a5e3de","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.f790f713.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrDCRA9TVsSAnZWagAAEwwQAJBknZH28qQulX7qS6CN\nPQX4kZECK35IoRYO5Nr0UxMTw0eVEVJAKAC0MysJNvXrOhKxFxBJmIzN2aY5\n+YKNDj5vQU+YyTs+YG2T8/3eLNbCiauZro78eQw+jo98cC5kYBkhvyrm7Gsz\nzuPeSQelUM4NMrAps9MerDdsFlV8jUiXbxlUIbWYDZtv1DVi7tjEsakUhgQT\nUMkhamuCaoAMm5Nn/DLHuY0YyaixIelpAEXbWTtD5wvApjTC8/BvOstl+xeK\nQ/s2DNd6o6iumifzOaTaGdzm6ib00Jg/6jcQ0hFqlNZE3KXZY+Vu/0D1ehL/\nBkVm7xjVaa1nqm8LYMXBvAz10LGI1dl1Yrt4dyoYEkV1oBHGHXWzIvPjdFmP\nneRUr+XhJ161rCSm8oXzooS8XbgjgSa1e/FT/kE7WtAK+BVvcFzQ17bVsSSS\nO4BEoIT2C6H4O56AAipRQbJNUTaZhA5aaRs1CTLFQUOyrunvEkV30bcfTLlJ\nn2s5lfsKn/vMaSXY8mOFCOoebpXmi1LHZn+cggsEyHfPRQrixzzDnCoNQS5O\nFnPsdnjh16qkI6f97Wdvs+6kBX+hz5uvQJuW2vJVaEsbYxTgNycDZR5gn3po\nZA8y3xnIvAB9w6o8+Evl8v96N2tjncr0yk7ZrRhAWXtrhaizIr1DQeaYIYM7\nSKK9\r\n=ry6U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhpeDH1/FuXU4WsvCBKNsCCUT4QulC4rhYMHOLQeHIxQIhAKidMSRW6X2fct66K4FLYm91qR7MJYb99EcXhsGr520P"}]},"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-textfield_0.14.0-canary.f790f713.0_1582856899235_0.8464761489678208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-floating-label":"0.14.0-canary.c759cfbc.0","@material/mwc-icon":"0.14.0-canary.c759cfbc.0","@material/mwc-line-ripple":"0.14.0-canary.c759cfbc.0","@material/mwc-notched-outline":"0.14.0-canary.c759cfbc.0","@material/shape":"=6.0.0-canary.69edc6e28.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CiEYs7wZHO11C0L9ujTeNmVSdbXqhtNNyaqyYiDsgKA4N7UwZT6QKmGRdpO77He5mEnTIKyJMUOO3sTQ+xnawA==","shasum":"c906e05bbdeddad0c0389255663690bf0cd55d87","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.c759cfbc.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqoCRA9TVsSAnZWagAA+owP/jDHCgeME5naRuYSAjAT\nsmzNahYKAEs6Jk6inMiVZtCjghW+3YHEQaB+HyoBKX6FMORBk+WDXFiSFRk0\nNOkSoqeS0BCc8Wr7haFibFHlSF/J6zExICcW9TtJ1x+vMUqLkeIdUT00Lb9g\n2mSTK69mkJxCxxkGD6SU+9vHe99ofDvM0yZ341hp7coKsE/xqGEwa9dWEgfL\negrwjbicppQCERAzXYjB5yR15OCQ724CaMJF1C/Ky4KX67rgiaJh/AMqOVxu\nM1yhGODDwmEdpwtmwXSAN9/orCj88eptDNX4suW+Uc1DSG2IXAncXFqvOwYA\nnYwVvYmo4hQ8bmJocRL8lESz5uycLxso106fo9YhatCvmkfUypAMlhD9fqw6\ntgpBK7U3bf6CKsLfic41Jas1cnRspSnNia0KjYNOZNZ6ZiVrOTDdrHOdbYyG\npQrhdO8jyX5VXhenpFYOYJKpK5M8+Fb1ck87SYiT7RNu67Eh5vWXKlmuLkO2\nmkvAuyJnqz8pLpBHje9D/FSaLaQ3U/7z6Fd5eHKw5+Mp/ygjBcBKhBsAAo/t\ntgXMPtMrOuFi1uKUvf3+t4YPkIqCwo572K9xclNxcgtpZLWPImyyg3QkhEDy\niNJ2rb3fUE5qAA7RIAwIpXOUn/Z5HjfgLuLsYntvsn7yYgSMkU+chVbfdpj0\nfpX2\r\n=e183\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAp4+xttEygylHoXe8F2935rpxp5M3KoQsHMpW0N4SoQIhAKKYEwNSojGj6d1KA/t8JPQXrTDdPJ0Wn62Zyuwr/UCW"}]},"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-textfield_0.14.0-canary.c759cfbc.0_1582934696498_0.39548741791978825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-floating-label":"0.14.0-canary.97ef53d8.0","@material/mwc-icon":"0.14.0-canary.97ef53d8.0","@material/mwc-line-ripple":"0.14.0-canary.97ef53d8.0","@material/mwc-notched-outline":"0.14.0-canary.97ef53d8.0","@material/shape":"=6.0.0-canary.69edc6e28.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-J0KBraKzTWAGgnSi+7KDIeUIiVZscvx5Done9kr6V8l/bV54C8Cc59LaHEkz0fO7JpO/+PT6Ap3av8WyOjgZSQ==","shasum":"b461ab5f18d78707cec9d80fb790daec43ef15fd","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.97ef53d8.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3OCRA9TVsSAnZWagAAnN4P/ilVp7V2I8e5EZo6e3ph\nmNPbq8++edxacvjntq/iMtNLT9w36aiDGndoeFos98bWnx7GdXzcELBJRs1B\nDLmgmH4ofxF1cx/GZ8J+M4SEmNJo6iifoMC4GrhjQJZZedOKyLBf8m6/oILI\neuI+pb2qt5ftG0ocQ4YA/+oXNFWU8+i/VXjfZP+RSBT0kM0GeTWCx9R8Z17F\n/8cjqABzbF0KDfeKqU5JaKSBqJvadz258luAIxvzm3W3udZsaJgvtMyPSgKq\nhIXPnABotQOxmDAMBp5FQrxYNVtxx/7GocvJNQqkgSb0qjqjpPTBx5wDgpqs\nu6zKFt7NBKWNA2565HxiYPouEEdxiubJhwJlreols4KDg9PrN+t7aOONqRZM\nkWQ13M3L9bzN6zH/iwV21k7Bjn8ULj9Ru/kq65J6Jc3skRGV59oQiYvqp0ru\nCDcFdup92Q17OMjc7IEKTcsxM2m2LmQKWwdcCDmFawUTnR9k1CZC/RgVRKLd\n7pdZRBmOMorY1YLnimBDffJS30+2N3wR61bugH2k1JAAAxbhjNfS198kD9Iy\nzLEWmMIXtViyAdJ3LTa2yr/99MZrKrmyLdPT6RzLl7UOnmKfWJYcfcNIZ2lK\nLdOVVnkMIhbCqAx7zDpI+7p6rcRvaVgQVJ2wzOhZvaAkCx8V41r0y58zuc5v\nU4Bs\r\n=RTwv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtvEkPauQd898iyTeycY2DLgx6J5t/VxEy1X5SsFKc/AIhAN59hxj4nZ6TcuuS+ZtIoX1nh5UiH7TB6ny6tJfKlx3U"}]},"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-textfield_0.14.0-canary.97ef53d8.0_1582935502054_0.2797715416765236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-floating-label":"0.14.0-canary.24f5fa6e.0","@material/mwc-icon":"0.14.0-canary.24f5fa6e.0","@material/mwc-line-ripple":"0.14.0-canary.24f5fa6e.0","@material/mwc-notched-outline":"0.14.0-canary.24f5fa6e.0","@material/shape":"=6.0.0-canary.69edc6e28.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HkDnvKwem78BU/dRRnwjsNCMb7MWjJH/wHjMsVhdsGRRtQUBvBHSzcuzICQZV0VLHu2l8aMbxxsR3uGtAKE7Bw==","shasum":"8dad32b0fb9466ffd99ecefdd5996008e476311a","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.24f5fa6e.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmdCRA9TVsSAnZWagAAP10P/0UEWIIejvGzffvWvrrl\nxTXwLAWeHy223hGPzlnyMjG3y5+eVmOTouwuxfHymelVc9pzGO2GN6h2iauA\nb2rN9hEWmWZY3PwBujwq7fHt8tfy2ugNefCIcfSRP2IjKnbjVxHX9QcX7q8m\nq2DfmSXvtFQ94X3pnWY2vvdgjTNpHUKeOSCEclFrkK/VUVPNI5h36dJhOYRL\nEOlKpdJC9SlsD/vjhlMk1My4KRa9i3ghfB9orT1chlO5qQO4CRyxr5UdAcQV\nufBhTGo9Doiu8nqUZQ46JYlC9wpAN5Lr7cEhpuHqMWSEMfZjCq0XdhXix+HD\nE383Aw+bJFzGtq0RYx7g+DcwJP88BXx3XthYGHLwULU5YCl3DW7Uz6b3ureZ\n1/HJ/ooDBiGTHB8yArXFVsRAvPIRX/CS6OFV1el5unLB9fFH0uE41h6sXEnL\n0LiW26ClBgYYsGKWHuXq20OWSEm5NEWcqb9GiV70Eksf9dKBsHkIjDpZqbNv\nwFyF+9w7vs0dvM1k5Tz5PIswOCKAc/A8rMnOpwjysH4XmH0vZjB2RRPPscU2\n9x4uwpe/JhyHZdYNBJirwnIK+Ka8EA7LJQDm02F/yzzEWamxs72E8oi8Dfxr\nwMLG1qxXE/uvFntsaL/t8m7ouwrX2Aj4RaYCtSzbJR6oRLxFO82Yx2NQMsqc\nUiQ8\r\n=S+9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBlaOCrhacxLkJ84EPNFJvk1yKEFtyV5On9IMkYltJtAiEApUJoPaIoigdq0hg7ykfQmt7YhgXqmo9xqvQgSDptjL8="}]},"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-textfield_0.14.0-canary.24f5fa6e.0_1582938524774_0.09495413736340286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-floating-label":"0.14.0-canary.960e214f.0","@material/mwc-icon":"0.14.0-canary.960e214f.0","@material/mwc-line-ripple":"0.14.0-canary.960e214f.0","@material/mwc-notched-outline":"0.14.0-canary.960e214f.0","@material/shape":"=6.0.0-canary.69edc6e28.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bgJb7nXMI6sG6qY9ZAV0SknPu6iVlQijn31LktwNf7b8689GfM7jqpU1usWb15s+Rx0ASOpFA7Drh6BMhzfKkA==","shasum":"15f8d096ce26d5ee6586d25eafafb344353ef614","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.960e214f.0.tgz","fileCount":20,"unpackedSize":281093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXSCRA9TVsSAnZWagAAW5AP+gIZeScnvO622CSFvhxW\nI00D2DHKo4qOaeN8x57VFFYAM6c/k6U8Tvqw1OD6mfLDXPPfG2+pfNBank6D\neZO2bxyUFnLQdsQKZcjrPvCiUYMmeVmO9mamOUfv8Kq2VDrafKjVAz1YpihI\nS8OrZeGfEtSeWajUWk+pnqJQxctEdWGsGMc4XLwy9WM9EmUycAaGg2Oac0do\nAdx/Ma11oZsFiDNn0LMHfHyMhN9pE68ivC6fw2bAwM8Kc4nP2uo7qOxryWGF\nBwO5eGzG7JXA9p8nwJvLZKTW6lGji84J9gdSYV6do1Pkcr2QN6KEwpU6uF48\nnkVODh5ziQk/9vNRjiib9JhEDkPPdXg4rT3eZV+yBG/vn4nb41o5pMLp2b0+\nU4662HS48tg7lKRmtNc7xYYVSArqAKfkw/GvzSvPQt0udjUeX3ttx9bXf219\n1m81jZVuvkpWSq61h7bjUTsecacxSAcaC7rS+fYrmOqIx3ZWPTIaEXFIDWQk\n6rxjTemOUvPjtRVI1nsDZhjxKc+03ZfbeTQp+Eri2ZDG+92Hd0AKXd5YdHYa\n6ghjkU/D5++uvTdaEgUPHHx+zfkXwDbf/p9dq1yndnXwvqovj50trWljdMQ4\no0RUPWGjJnS3KAFX+q4LwbLtazNL8kCOAexe6yjpxI20tfEdi4yPjeDKrOVU\nnoJ+\r\n=Nim/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIOYnnVabbsBxsENFuH8KtMiALz5QtFG0eoD7iLg0LjAiEAwC/Llsh2F4dyRDz+hQEoK4JojA2IWQ079BJk6Ck8uZ0="}]},"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-textfield_0.14.0-canary.960e214f.0_1582945746034_0.5455923418846103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-floating-label":"0.14.0-canary.a2f046f5.0","@material/mwc-icon":"0.14.0-canary.a2f046f5.0","@material/mwc-line-ripple":"0.14.0-canary.a2f046f5.0","@material/mwc-notched-outline":"0.14.0-canary.a2f046f5.0","@material/shape":"=6.0.0-canary.69edc6e28.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-q6zExZ7MG1ma4QUCo1u3YQiWcWT61MQbW3jC8j1QpsxrY/B80Epm5UxqzO6MM/5SO3Vc1xafv9ugyP0EzQm3gw==","shasum":"249bd97504c53e2373cbb6030b43b21692c3fb25","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.a2f046f5.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatJCRA9TVsSAnZWagAAXk8P/0A3nWEb4sgqLTQ73QTp\n7EBsBX4NgOEB9+e3DSVC7Hj+1B2jMCBvmec4henmCmn8z1Idi8+/xRYxmsqm\nlSJX2+A3DO0V85dKyUU0La+UQfB0B8pbF9fdzi2h+RateiSFpRPauhQo6Tfo\n2uuiLHK8Ejf5odQJ+38LbVQQig9V7SXSo9Vs5oPPXDBouUquuhmPR4P70hpQ\nzNq4O46K2UktDo4x19ikQY4XJoaw5kyo9LlsF9vCMap8tGWF4T86sgBedqSj\nGHgm+g0ADVXUI7atwBaxu0A08KmVbJlCuobaPbcbf49KiCNGFDUQKs2xc00e\n/YRNwjJZu3CdReX8IG/zucyjtOL2PpBR+gBANptABU8rgxT1X5/o535ieVaP\ni2kLM5RqEs6yZ5FH9XEPdM6KUi7ClcY0XMfIjuw9wHi4QTAMk2TBgwmfm27m\n3KsILH8NrZXNiP6LIe3ZcpsGGZiIBrKRWKvRzt8j0MZI89mlv5utIK+Lal2q\nUp8Y2s7HhkaeACXNSF+a4lyRG5xdjUtfV7W7s8W/IiYAcy9rwbus/h/oDwsn\nm+VC7bSkYgWbKCH6LwB8oxAGNNnrwOqj+Uka8VxBYAUbLwlLQkHXj37l2LEh\nRxETQeG8bKaNl82AK4VFDfhxRHodEf0O8zpztdXoiY5keMLSObJN09MXgCkh\nzAq9\r\n=Eh33\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOYxtHrZ3tgGvepXDvYevjpBgDFZ3GGzwFbh5YAZW/6AiEA608MXxZ9CB8SAFgQRoArOY/ULrT4BAGXvf5aqPZ6nkU="}]},"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-textfield_0.14.0-canary.a2f046f5.0_1583197001327_0.6959543314241952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.69edc6e28.0","@material/line-ripple":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-floating-label":"0.14.0-canary.024f371a.0","@material/mwc-icon":"0.14.0-canary.024f371a.0","@material/mwc-line-ripple":"0.14.0-canary.024f371a.0","@material/mwc-notched-outline":"0.14.0-canary.024f371a.0","@material/shape":"=6.0.0-canary.69edc6e28.0","@material/textfield":"=6.0.0-canary.69edc6e28.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4wfDfhGIUX0ttLrR5nIACus+4qSD05adZ9a1JybKwh3CXxf47T7xw1RMZxzg9sqe3HaAighIUO5y40YRsrpzPw==","shasum":"46b1122d76810b07e48eea0884cbec04d8f71262","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.024f371a.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLaCRA9TVsSAnZWagAAWugP/2uSSw8dnPkdby/T948V\n07emjfrbcpqxzHQup2KIJ9lfyRdZ4+rVgFyaMZ/oCsfIpNaE2XfuthqB4Rjp\nvHwHdaKg5eapaGEyKWqO34yORThFzXO/NHzDnW8+xZZWjWk7plJKnckGrkAm\nukAd5uqD2vyaTLvFOFj3J+NO5I4U6raqElTuxpJ1ZlmlZ2gSfGz9GpWyCOLF\n0vxrUTJIEX8JUSjgJcxNgMEi4NMxXX58hDAbY5XTkvQ4P/L0EaGvfcMmTMHo\nM7MaDf7Jo+izDY4Bppkn+9LuUjjv8G9k86I7+GtUJdXpn0SLVn/IPI9E3tKk\nznGPYkrfp9w5KPbVevNLxqhKiuY6EvvBd5k9//T/tOe6dPPIzwbiVznUk3eB\npLOvmA3N7IDxSFGilNCw2znPhaxrGqMVnRWfExLzH99pyals+Ng479tgHctK\ncaiOV0XrIcCbgCQ0Beux42PfS/lEuJSQxGOezuEVT+XRIxzNSGliVD2Nu6O2\ntUepDARPYXwK385puI+rQojFiv1akRjMHo26iRojmYRLqm8YVoXMa/ZI1bVL\nh28qyxAMjzawcsBEPBwdVF+lBeYmjHrLcS0NqiAPiEJdKFTj6aXhvtXuR5JY\n1L6wNHDA448bKxISykyZ0+mdImiYd+NrLPHRN9wLVLOLhAGwz3Sh9IvExYiO\nb7pT\r\n=ak5Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt8aFdhgJ+sE7DGukP/xV05qvVrabnnsM0/nqXC2YSWgIgVU8P1GQhjCLFwfrvSz79l1AV0/6jJ6PqMo6LPzczCYU="}]},"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-textfield_0.14.0-canary.024f371a.0_1583198937670_0.3225903279810407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.9372e4939.0","@material/line-ripple":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-floating-label":"0.14.0-canary.2f164110.0","@material/mwc-icon":"0.14.0-canary.2f164110.0","@material/mwc-line-ripple":"0.14.0-canary.2f164110.0","@material/mwc-notched-outline":"0.14.0-canary.2f164110.0","@material/shape":"=6.0.0-canary.9372e4939.0","@material/textfield":"=6.0.0-canary.9372e4939.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VYH2jJd5EOkTNdmFDngIt1vDPeo3ykTLCOdCRBaDgcM1tC3xC0RO/UmEIwjjw2L/0ZlKrH5Qesl2f/y/kmDO2Q==","shasum":"0d1e0835da26a59d471706c18dfe6b5c2b3b6fd2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.2f164110.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs0+CRA9TVsSAnZWagAApr0P/RH6ACfpOjmWnhpq3qOH\nyHMl4gXDvcksS928pVnK8D3RrsScolP69hb5mVVWamdsI63z3rKdOYQKzdv7\nTNIpPtP4Ju8BU0ZjgYdcQ2sOfIJXz7sxrs/UnnWXIIhGLwR0nODlwvmj7i60\nUnFsWcppcoSHM8VCYpwUIWY5MPh9mrfTrn1EIf5AaQHl7w1kR7IHdO7BT7Gb\nDeOC7GjNecECd4Xe7eVKjKW6cwyPW+OYKjAeHlwUoMgHsxVnQbT+QkBhlHF+\n7NtRvMC3XhlSYZDd5CLYThSTuVLsK2v/VhFVGS4UZm0FY3OEBFvPKKxEdQ5M\nHbcsm7DuJBkUSzE8vVk33d9kl9rQedn/kIlFdv2vvYF77PGq6xYsHUuhd2WG\nxzSsbpsjxWjIij8XOFql44bTIdTPxCCE085uOQD+VxnMzd3+mfcjkU1kmT7y\nHKYDYfcLEodNYriJ/xfmNzZGsxh6KGVM+zyalzAUzdteRkFcISMtMbTnPqrN\nEtFE25FWAKW4dfCjNbTxZ1yDLbRHXOpRDPPVXA5PFyPwbJF+4IcbjeCM4xfd\n3uFTKWe1OfOIPCqJy9oG75UpwescFv2F31uwdupg7GIv1BtoXEmuVjghSV1F\n943Gyy/78IOkRlyU5xGelZE/6mJueHlL4rB/I9YstadIGU+90X9ElyGuqfbc\nElmm\r\n=AcJp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO1ehe0QtSW7IouHWvHRKONWzff27DTkPMqirZOf9xDgIhAIZepwqRFiw0X/PCF6bVDkRYwX+RP23048naZdWOon+J"}]},"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-textfield_0.14.0-canary.2f164110.0_1583271229964_0.46060031537225243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.9cf5e9842.0","@material/line-ripple":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-floating-label":"0.14.0-canary.edd465cd.0","@material/mwc-icon":"0.14.0-canary.edd465cd.0","@material/mwc-line-ripple":"0.14.0-canary.edd465cd.0","@material/mwc-notched-outline":"0.14.0-canary.edd465cd.0","@material/shape":"=6.0.0-canary.9cf5e9842.0","@material/textfield":"=6.0.0-canary.9cf5e9842.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-efyCU65/cxUUL7yJudF7OY8J1tWMP6+eKtbu3xuSf/nAX4SSu/tRpt6kzu21D3UIscAkAj751xHmkE60y2/gBQ==","shasum":"357a13fd1c7a2afec7e71a647bbe707bdde0ac2f","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.edd465cd.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIGCRA9TVsSAnZWagAAvDUP/0NiVebxPaW57re7c37w\nn7K7soPtvANL3HxnUmoiyODqgx4raQMLx+8dzGtMNHbhKDcylEs7CgZ55Jom\nnaXLIvMpN9kzyBrZF6AHtUFs1SOBEgFYQc8RoSO3BGUfCyGCk1jnY/1wXjGV\nmXMjG4U3oVWj22R1qic3eValEHV9lvKhVsHTqezO4KqSWVNPCSOzcCsLA4n4\ncDEOFpp4PbtMJLus624sDHFhdK37Fnxz6wDhlqHnPBNoyZxRLYOJkRlGAex0\nRpdoTluc7oyzREQSdHZQJe+XuTYdW/k8LMubqyLQnSGn6hcFnGV2pvz8fKcG\n1GpO+LyBNwo9CaDzRLSnBkpsxL2ILpy+QKWzzwNe5+oduS/KyDlTcmxwYeQe\nofJbChnwVg8ThT+8Dk5XhdjDDkDpDeUV9Vy+z/5be4FFn2gPa6O7lGLfHir5\nJC5yEg1x+eLYVMiY03BblAsXhXWLO5wWh55PA0RdZLF4q2SxCApNp4dMmdgx\nJPS1Qv9FUKTZJSmFwLd5J4sWxgJORvKyVU2NF4QBHwBkLsCLe6N68QLQJoIV\nsI5dSEZAn7xq5fh5PnBfWcP997R9cJsbSitzcVUcZz7Ox9CKTCfUvHszppM0\nY0Xbv8AoTghS+reQJF2dSPJkI9KKO7hoph4cGo+Bhsx/CwnIXMssMsJSV+JJ\njvdw\r\n=Y8Ei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPlMhBR37/QEOauDixVAyrVcKsqFvO/RoNwTpimlC1FAIhALgqghlxdFN7YWdNvld+ClfIU7LuUKSdiJDDcdBUWpRX"}]},"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-textfield_0.14.0-canary.edd465cd.0_1583280645644_0.558302299655542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.9cf5e9842.0","@material/line-ripple":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-floating-label":"0.14.0-canary.2b02d017.0","@material/mwc-icon":"0.14.0-canary.2b02d017.0","@material/mwc-line-ripple":"0.14.0-canary.2b02d017.0","@material/mwc-notched-outline":"0.14.0-canary.2b02d017.0","@material/shape":"=6.0.0-canary.9cf5e9842.0","@material/textfield":"=6.0.0-canary.9cf5e9842.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6T6mw58PVAxaa02XjuwP+DVgAzBhfccH5mfRUl7c61LIYjNunirhKGXmq6s2Gh995l0hgJqt8bHQOw4vUf+l1g==","shasum":"75f4dcf78d51b854c2c19dd04196e700e4b19b23","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.2b02d017.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1ACRA9TVsSAnZWagAAmhEQAKOCK4RVZBc6gT3+u6Oi\nHL+PFfz+tti35pulESNodEnO3UljHOu+BrGXpK3EoOhmdQWcMdF6kmokzjub\nGtW0221T0JvmHlhRbhEtubtlHzyqECFpTFeqicBqzE3gQTWyc/2jF1CQS9Mx\nN34EBiHx/R/niPYULvlyWizv5wEPY22PijrB+tN0o1XkftFSyAGNPQsTMUCW\n8KGtXvK0v6Eibys+yT5ZORWDs0Vipm8TZ6XS5+LC9ycObYZeIQY20wfqfecA\n7DcvhXg57j36ZYi/Wp1OK6ELnzeIdhXQRqC1wAY9WOD3zGLfKlcDIKmQA81i\nbj/2sSQYZ9zUbr9QIcEDzGBJdydJit1U184gzGy27RgwebBCb3RLrjHR/yed\n2HqB7z5MEvn3VilM9HpsiM1PxmlbS8PNz4oywSWU7hECT2jQI7R48SYJ82pR\nB9Ij8LmDzLcGMDFoDtPhXxKBVHsQgVMsgYDKb2fug1btOSZhgelevCUxhZuv\nWxe/aVVHaliXdo9On9LLfw9jg6bDdr+t+O2HTaIiTtmhgDEngjeQg0jHDv9+\nluJejJKX24AVlC1keYBIW7PEE98MXY8AYoAVdeJ/68ycYYiw0gwbBMW604KV\nQCYnHsFvB5Ghji1xgHeYUhs1ZxIBJkTQMe7ewSS/y8brW6rCOk0O7k43tuYq\nt2+Q\r\n=ZRG2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf7UvE7qOWjhvW70Kjch3Wh//PDYDFAVr/oLy8p6yOLQIgS1Y4Jh6KdBw4m/HZyVgz0SrsFJK1YUSaE0Gv8Z0IvfI="}]},"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-textfield_0.14.0-canary.2b02d017.0_1583353152312_0.8290420803880081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.3657f8863.0","@material/line-ripple":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-floating-label":"0.14.0-canary.cbdfe453.0","@material/mwc-icon":"0.14.0-canary.cbdfe453.0","@material/mwc-line-ripple":"0.14.0-canary.cbdfe453.0","@material/mwc-notched-outline":"0.14.0-canary.cbdfe453.0","@material/shape":"=6.0.0-canary.3657f8863.0","@material/textfield":"=6.0.0-canary.3657f8863.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rRSyrG09P7YUC00WTxmnct07ojti184UwD1VZSgLk+mZpOyOM6SmBwxCAQ4n5cU7TJz3nTHMpFLCbQ9EGM+rvQ==","shasum":"0e35e1e42d2fc704a15a341d257dfa0d9ba512d1","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.cbdfe453.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFQCRA9TVsSAnZWagAAvKgP/j0Vw9qaX9UrcGRmt+b0\ntQfgUFsLesPAzjA9odEcN1mGvWpPrxzXNcZ54Q5KIIbnnAhRv3zaLPqY0pcZ\nZv1CM+aIOqbXoC0SHiasfnELLyV+B/ur7jC3iOMNM+jnk9j9lGJjU4LnLYjD\n1UAeo7yzodthrPZcXZs70JPtCGx08IKU0J5OeUosKtSbGVVg3+N8RYTe2QCg\n+xVOm/k4UQw5XD5b4Kq4xpZZ0qs65JQwlSkQQwD6j0JyxbZUlZNx+8ZiT8vU\n1OTKK2ixsuwsAeV2P/0KYmgfL3R6owkfL5w4CoB0aUhQJTQlfGjBeopa5NDE\nE+fjN5mu7YOqQsyxwVxQvQpFELUlWr6rzwqynnQwjY83ceHMGNEIPQAVfWwT\n2olfeAz0tdiA1dL+e2KXsJA3rqyS4b/Z9H8hMAHp9GUZv8oriMEt43GlG6Dd\niOZhOy+7qsO/SJI1beJQArTxJ6kZmO03/3QKGD2/LvRLm3KuiXzdbmzq8urD\nOXOGn9o6s3hHCBAhmuQXr/beVyWkUJN0YGEKLHEpUqZqW9Qwr6SraL501h7x\nTe7QCc3/eC7SQZN6dydaxYktKXdMmyNRSMfFLjZVMMeIPQX/zeHR2otOpy2w\nSvHK+KBQP6sxwsnI7mgbFRZIQLzuxbKdv+lLbPqIvsb4LWnP7iHWn7+nhMhH\n42V9\r\n=6weH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqRiiDC49RX6u9TFo2Xe1QGZXJKb9JHI5N7nL1UHv2GgIhAL8lw3K3L0GgWhWVAb6x/e3gWNc+LV+0cKj77x2fo5ie"}]},"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-textfield_0.14.0-canary.cbdfe453.0_1583358288238_0.323720675096955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.17b9699c4.0","@material/line-ripple":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-floating-label":"0.14.0-canary.02aa8a98.0","@material/mwc-icon":"0.14.0-canary.02aa8a98.0","@material/mwc-line-ripple":"0.14.0-canary.02aa8a98.0","@material/mwc-notched-outline":"0.14.0-canary.02aa8a98.0","@material/shape":"=6.0.0-canary.17b9699c4.0","@material/textfield":"=6.0.0-canary.17b9699c4.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X1xv4i81Bk0kAKwBLeER8u3yVRWsi+9sbPpyz8TPbnJk29YggdYtLAww18g978cWYbzth6JKr+xdqXlueiXTZg==","shasum":"ca93286f22ae228ecf4961f6e1bf10660211b6ce","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.02aa8a98.0.tgz","fileCount":20,"unpackedSize":281084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRmCRA9TVsSAnZWagAA+dsQAJlrt0awWA61HpZ91v/A\nZcKqX174oKNLnlqg6yGXe05aSGFHOXw5SeaDfAgMZ7YLER1DRgxBIfzAdUNS\n4cdTzSyFlVWyyKxvFTbzV0wYlCvkaBAcDAidUTcL94JVEaB0LEjxfKaVWv9E\nX7MyDreGbSGUlzRyteuH5XrJD1W4v2QCQvlh4lLZ8FPy3rzvk6iuOT1+HxxF\nXwn4QQx8JkJ/1XdaHsL34NEhbiojCVQJUrHTrCXIzGuWfXjtHI9ebUJcNTAE\nYAlJ3NO1BzmMrsqjEJbIN+h13noNMDIMCAa46htciAMbTdSswgO8NhJ3kzpw\nHJ1WsIOkxpy8uS/VDSti2+m8yQFp3Y7BoiBCnvk6h0Os8r0ugTV+lShRzhXB\n06BxFZpG9kftIQ/03zGPNoUXSSAw83RUSx6kDVJj7GKUMyAfEuGhmrqTcwGQ\nxTiiNz8aUW6G0h4I0IL6SDOKUdOZCPZY28e31Sy9c7J3qhLXpbSIqRIVkggt\nRaYrYzKaFcSupMcN2YHZ0M6JNn3uvXEw8u+G4wtDqJ6nBDg4nvufh3Y3RIue\nWfEr+kS38cu3BtJbA2zvt3SW7wF4NEruxXB0yMccJLkueaMGX+Z3kgKXqwud\nc8LWCiE4dGcmlRPmOHVwdeW9kROKMFtYA1wBs/s7Vx6OODgG7cZ3YJ0A9Mtv\n3BLw\r\n=oH02\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrvjDbxQOSx9VY4BoCDo1OnUwYf4k7ub1f2YmDYYxQSAiAB/NO+YIzZTJTRS80CxlU7b1r+YW2FT7Lb6knplldIpA=="}]},"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-textfield_0.14.0-canary.02aa8a98.0_1583535206215_0.3693810708711791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.17b9699c4.0","@material/line-ripple":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-floating-label":"0.14.0-canary.7cd5aad6.0","@material/mwc-icon":"0.14.0-canary.7cd5aad6.0","@material/mwc-line-ripple":"0.14.0-canary.7cd5aad6.0","@material/mwc-notched-outline":"0.14.0-canary.7cd5aad6.0","@material/shape":"=6.0.0-canary.17b9699c4.0","@material/textfield":"=6.0.0-canary.17b9699c4.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8+tCNKVanKo6TjEaESlSQ6wZn8UjWTmPnm2/em+QV07s8PYL3evSipokuncBW8f1C8XNdx1MOVsyUS1RMGkc+Q==","shasum":"3a4b314adc17840f80dbfcd6a9b44fdee7323212","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.7cd5aad6.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8sCRA9TVsSAnZWagAAvxQP/2g4H3y/Nx1zPHbbvQoy\nBaB10A8N/SEvTYcFsROvCXaA/GP8iTyx2/WGXoiabuujfLIYlqyH5jODS2uq\nTUbJJecs/b7Z+bRDJalK84sqwD6znYSF/w0n6eOPkcD7iO5lWfdGlaMzvfvw\nnwVPpMRVgG5p3bG1tfSqUEvWW4iGJoCkrLmu0LU35GojK61ezydZG5sLdNCZ\nU+U+w3n4pVQAK76eWcDtTSVh0qmM/KSfTJ4I6A1vF6Pqf71mmfcCgbZTXVHQ\n7WLNTHNvMLj7c29xz7Dv68b3QvyAlA0dtlgKCgZRVDD8lluebfZ+CBPhPnPF\nY7vxDKJQ4Wldz7w2NBmogHhEHaaMxz6hFNyFx7Y2/Em0JHzdTQ42M/TFMm3L\naZv8RYlJDeG4oW+xzaz0MNX7h2YdIVx2CGEUOKVbmzPrkeILL7HxENYPrbFp\nqsj2y/pNPr3jGz80tEP2zZyDP2GKoMJKVXcrMcoO23A9H9jUp+6sN7yl2Fg6\ntTIZU636zECpaQR/gRDYC1+BSt+2qub/MWaxpsfF1Fp2IoGqmjq+bpgnRtrR\nzC+25dLASuDEPuWp6L5nECt+3IfR3+69KENXSdRwwhIaOpSRtLLN0h+J/7F0\nLyPOj+DiuLnJ3auVNljBiEGHd2DiV859T1NEpK5x7vARx+4qY7s8IFspBAzA\nf4Pi\r\n=DOJ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqiYikakT5ptPmAm8YqYLm/Ga7+Y5Q8yUIZl+AJTXm+AiEAute/HePd28w1Ln+dhD+saGXKbCRgilt1grny8opl8Js="}]},"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-textfield_0.14.0-canary.7cd5aad6.0_1583796011663_0.13761641846572914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.bd33cb56b.0","@material/line-ripple":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-floating-label":"0.14.0-canary.3a79dfa6.0","@material/mwc-icon":"0.14.0-canary.3a79dfa6.0","@material/mwc-line-ripple":"0.14.0-canary.3a79dfa6.0","@material/mwc-notched-outline":"0.14.0-canary.3a79dfa6.0","@material/shape":"=6.0.0-canary.bd33cb56b.0","@material/textfield":"=6.0.0-canary.bd33cb56b.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aDIMZwKbVTLXt+GyWiQLuNMwhHZMyuszKLX5xz/1BG7AO0wRkA2pJQxZpYeyE3+Fq4/3xJKrJriKnSTO2kmdUg==","shasum":"a5eb10f12ffb5f517f1b0149e6e222e96518c488","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.3a79dfa6.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHSCRA9TVsSAnZWagAAQB0P/idIR849mAFFS7yPEq4+\n+hDUDojHwoU8tvb71/7YVKWk1Ij3Snhf1/uz0nuE7bf/2z7My1UQVHHT2rk7\nQZqDSXHmeI6DGnVMMZ3+o7Ttl1lHj0Rx4TIdvUTLADKiF2PAm1R5Vc+UMUxK\ngCdw4BrEK5X6D3JSpaRXG3jQgf9b3iuTAVOSeCMTJ5M5AUkjjnp4ykx8wLwb\nW287gyZWdTuVuOF86uAObfQ9MqJGUHmkOKeXLb0kHy0H9O1lw7cIDDwDFS2i\nnkwQZ9tqpC3/cDXdOnRJaUeirDHPS5LSOvdWEVZ+gx1gLjf2zcXT6fTQr+u7\n7dZBCTLwGaqoTWf573vsP1XvRrmmDQVLNkwjfK6Mwg1j6jzF6k0eS7Qowqx1\nouk7huMGiyb5DyRR3Wnmgdvnhq7dOLTY0ZZQ7GbE73RpTK7YpS3wIz4+rxbq\nFkSEap+BhFQQmtuV8jjIBI5eLcpxXtGGRRTjJKB+M2ZJCR2gsoLebt/PNnD4\nhww2wVBLAklMEn6z6cUQdDNJPa5EIx0o+5/jupEfayIvH08ZyGq7002OrStL\n9axROSClnDCFzOEtCMcZGSpNGTk/MeOm8jomX7CeXlbZ/4EQBk9hICqNwbDC\nqE0FaG/dC+/XUMgLniCcNWmHdIJnTj3C2S3qg2HsFBMk58RRaTihq0NyKroH\nkM07\r\n=QplA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhSrV54KzHehKc6qye4hjLyhkDTHHwa2eeWNzqJuHq1AiEA34UFeTXF7Ymf8MVWMEL72mkZ/UtLMj4kYt/jgY84CEI="}]},"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-textfield_0.14.0-canary.3a79dfa6.0_1583808977823_0.9142368942406154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.bd33cb56b.0","@material/line-ripple":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-floating-label":"0.14.0-canary.22e0f5c9.0","@material/mwc-icon":"0.14.0-canary.22e0f5c9.0","@material/mwc-line-ripple":"0.14.0-canary.22e0f5c9.0","@material/mwc-notched-outline":"0.14.0-canary.22e0f5c9.0","@material/shape":"=6.0.0-canary.bd33cb56b.0","@material/textfield":"=6.0.0-canary.bd33cb56b.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5xZjo0hbCwWHHb6LP4wFsA9Qkyiy45X5KWJyhSPPg2fnmH0M/jQgeT4cgS5m0j2Ox+STBQe0iUuhdxiWhjC81A==","shasum":"0e062d69751fa15c0c3b2340ad3bdb861889de77","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.22e0f5c9.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwK/CRA9TVsSAnZWagAA1WoP/A7MY3ng3Y3WkoJ5dxV/\nNqhuDK9Ladtyc2R1qyDsVBjj3944qgZBRJwjkqRnzxfS269+0iG3WpZySz5L\ndxLyiHx32Q7VfMkphjevPKRmt2g932D/Ne6uYjvrwpWL7d5p3CFlPHNkC+n2\n2LO9TutsRnwfA6ii4qNE9Cg5tkS+RJWy+ClSonbda2KLdl5fAHztE+YyZALt\nX+9IAHRY6WyOqjcWdbC2XfHfCizzueaNqiYQBLXuBC6LCRjY46CsY5hzMsFT\nZc8t2ashP8796fkagrFJ1OmgfnvadrJcFRoWcPTYsm6LTYUQDdJ2H4QqYegV\n5DBx+/HA74BpxTDUQtQOpNUGnWcM0YOxnd2HT9SC3hUoyYppfYshtZl4cqAQ\nFRQfXg1+UOccH24xwtGNzW1a33XAeeXn/OaWYHjZV7piBVt8PZ2YSNLmm6cH\n8pQWatQlW/2E7r/fZPaWwWg3rISnRd9GPpWT2TtZiXuf09TKdWU8f3QgQvNI\neNycYm+PJbQpSzzlIxe3ve5TqEaVwFsZFZs5EpAwdsMcr6/ZZM809WQ2Y6Xs\nhPTijmQDp1ps3g9f/F0kDQbzDl5RtGsxCI20xlpjRnjwkHJ0SNrzscAQWpys\nhWUvyQnR5yruXJNfW1XSn9lG/3/zxqHnQJfkWsgdiOqN1lt0q1iO5KxhZ7n3\n0nnw\r\n=ODWd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDOVTNV96r3klk1i9xgWLmrgdEp1qqjYW+m5ByXQlD8AiBtjTbP5Q4ovNHxcXdKMNHQPc9s8/FO4r4xN57gwOQwiA=="}]},"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-textfield_0.14.0-canary.22e0f5c9.0_1583809215154_0.9360569045366143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.26c049afa.0","@material/line-ripple":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-floating-label":"0.14.0-canary.f23a1d1b.0","@material/mwc-icon":"0.14.0-canary.f23a1d1b.0","@material/mwc-line-ripple":"0.14.0-canary.f23a1d1b.0","@material/mwc-notched-outline":"0.14.0-canary.f23a1d1b.0","@material/shape":"=6.0.0-canary.26c049afa.0","@material/textfield":"=6.0.0-canary.26c049afa.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lcJYVh/aZB8u2A4bcUaDs1IPVL98+VfVsDfUPW/OrVMSoW9tVLAt83u0jXHeTxD0RIZGfj2pM0CeT5J2+4LVTw==","shasum":"ecf447960165ab5b2a21b5b55da37434fbb1a9e8","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.f23a1d1b.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8CCRA9TVsSAnZWagAAQs0P/1Ul7KgzG/xSg7qBejLC\niXTSHFnGjvv0BPz7hZtffNtaFY70wW1ruJXeQE2uMTwnIpprgzI9ZO+hzstv\nW0mnH+p+9rdRcnBgQA0mWWt3EqtiiYfI3wrw/fY66QKFO3q2RwgZZyYsXwiv\nNAKtD1HSlW36/cTXGxgM2hocSgT7HTKseXf7OmYJEE27V3esfQi1KY947rg2\nPyhJJGeiURtLXQGZXLoYcvRjHVAEJpa89Rd2o7dfA28zecT9doXoXCdG334o\n+cw1k/BhwISMG6qKUmT0s9t4CcaFWmFahcQasQGk1BWk1I3xHLBqe9BiWpf+\n24iqBu/TNjaexqI/pnI5WC0XdA2aLbcXt7UC7uQTujPhIHSMeeejzrT+fNIF\nWEc7iBa/I5ETvz9SdkSwkMtSg+rVTkOyHIoe3A21yNvl/thWL4IwZzUBaXEx\nR16I0YSQSHO/DBnT5DLwTocjW0K5ediNbjAAy/bdpxcZ0NLM5k830zIDtOCj\n3AJcJXw6kqCAECfm+WAg3ztQElWzZPJBnuDd794KtltKEct/m+KihRzSMG0w\nRJSf+kvCakFLC7Md9wFuPh/BkwQkVRvSctn/V4EN7FeKMBZs8Yejp7rE+CNJ\n0s9d9+tvQobpbA98hFtcI3/Ub+b2H5jnamfJ8IiX2O35H0bflTii4XtaZHiS\nmnpX\r\n=+bgE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsXcbR0xKDKDVTLlX5JlOisQi7ItCTYFyfdF+BCQciSAIgOEae/kqSRAdFelghR0Ba0wUY1mNNSpr9S6apCq7h+bw="}]},"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-textfield_0.14.0-canary.f23a1d1b.0_1583873793678_0.9922084460784881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.26c049afa.0","@material/line-ripple":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-floating-label":"0.14.0-canary.34b2d69a.0","@material/mwc-icon":"0.14.0-canary.34b2d69a.0","@material/mwc-line-ripple":"0.14.0-canary.34b2d69a.0","@material/mwc-notched-outline":"0.14.0-canary.34b2d69a.0","@material/shape":"=6.0.0-canary.26c049afa.0","@material/textfield":"=6.0.0-canary.26c049afa.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-69WW5VkJI8fHu56VftomcRXMTyDA2JBpHnYqwhpCtpAk7VnLAovQwkJZWUNl13JiFMGdGddLu5N/K9ZTBeJ4HA==","shasum":"c2bcb542abfcf2b0cb28d3609ecc9a16fba3bcd2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.34b2d69a.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANKCRA9TVsSAnZWagAAYsQP+gJqc+dgGfFB5slRMnzl\nXsfDEClGwujufzV9PqtgcyeAgYMzqaVVDWgTlhD9E0XQT1OUG4p1rV+F67G/\nPJxQ/1bdaEKvVuHW1NFuSYOE1J3BcZIZwQM4ehl3CCd/rsoTa9L8GG81dBgU\nMP8ccPCxCxSuRhmIZpuD2EZGvwOM2wvXoa/C0mNI1Y1+i+OwmrsSZHjRalVC\n0QUUub8uatqEO2bkvfY/Y59PTuhCRkJKKb2BOBOA7fA9EHQNWRBAZPSzf4yM\nV8qZM3PlMbsOhuuShqrKUWUm/nmWJLLlp0NmpMAsUaA2fd7za0yIb9a005BL\nbFX8MHcU/S6LIRFyfs5FbCXnq92jXz7R+/JrHgT4Ekp5inqwZYwrzJMhojO7\n0X2mkNGCG5t9RsRLabmN+1Jb/hEwm7krLvrKMInUcljnWIXj8pfORB06aCxQ\njtBrxBULRYQrhDvEI8/XyWCKjlXL8n/tdk9S5EGo7s5BYUHS8FnYtXyCLxIl\nCDqzhFIKv3rY4xftFhqEKuhCB4igXeHuCfrxNiY1yK8QlL3neiKrWWDH+ms6\nb2DLZyI/hrGq3kpnLpLToBHc8ejhLW8eEOw2rNEnLHTFylxiuTeZZhYdtnsn\nyYQwZ8Em5eiuzaEpWG8izCZzu5AFRdvm2dBWkOk8JHzXc0azV0seWoA31SOe\nOv1Q\r\n=t/aW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrzmJ6yWMGyznymQdODD3ccmTNZgo09jXFlZBVsS5fwwIhALahPZJdEE7DhpgjYgt6d8iKaUpfxIBiXborOXDCPoXQ"}]},"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-textfield_0.14.0-canary.34b2d69a.0_1583874889574_0.74553308273828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.1db5c9fc8.0","@material/line-ripple":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-floating-label":"0.14.0-canary.dc04abe1.0","@material/mwc-icon":"0.14.0-canary.dc04abe1.0","@material/mwc-line-ripple":"0.14.0-canary.dc04abe1.0","@material/mwc-notched-outline":"0.14.0-canary.dc04abe1.0","@material/shape":"=6.0.0-canary.1db5c9fc8.0","@material/textfield":"=6.0.0-canary.1db5c9fc8.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-btNcClQpsg5+loG5sB/fR8soT/2teppvnRUG/O1oQUwa0CF1RY1Ez57hu2f8IXPWFZcPSj/uKx8+kAt27oxvpQ==","shasum":"f864c96bda55c2770cf14a9219c36f8c85474fb6","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.dc04abe1.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5qCRA9TVsSAnZWagAAXREP/3tJLPmF5U36JL7MrAbC\nSOTMTW/GOe7/zoPqN2aMQzbblLl1pfF41uUaoMIBzFas/0n9kgPMBXVyMh1O\nAAyEnhUHBGHJpoRWKkT77cmtCg6GaRl/R/AGjDL+vSP88du4ZIUEMmuYc2oE\n5RMaj4WxnrDBwtBbAZiCQ38yP8cMAwk11Byp9W1STfV678Z9Wxryscav4XO8\na4rAOaxXIsBTDHwpmosl0AOnSW46QB83sNsfyBVHBLZY1OcCrK0+hv6f32F+\nNp94Wuy6PR7p328ZIZfIiLE9n1pXvmGbPNFvZ494UniNjnvfmvOiEQe4Il8h\nOnHi/tnrg3+CGiMLX9eSkcKnWc1uf0vhwKA8afEj9IkASua13qDeKYnh/lxY\nIy2lYthH7IytFYnKvsR0PKOzJLqpeYN2ErLKtRw3Pu3AfguyHDm13IiYVVcq\nJxVRGoWCIn2KXomz2Lg8u+AGTT2Ki1WAnLe3xh71EwEM8VhqGA7MmY6tFDRG\nd3kwyApOH0esl1yV7sQVYFsqAlNa8n35kVEc8rLNKzbNzEQIlkIpEk39p4Be\n19zhcJDKq/THtnpOgSVFsACdcDpoDQr0T25nQeZ+TI1mTEPs8XACboX66b5R\n4/5+Z2eJqSwqYQmXU+W78z9UEaslJUF5Wd2DYuKsbVC72DwZlQXcMkDA6mtl\nzAlw\r\n=5N9j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFHvJzhelCT5PVXz+zUksGCPZYcnfDzUyja9cm1kowEdAiEAr8Ft5pIdRcH+u8YixwtDmU3d6ib+k75wLtv3f6puGak="}]},"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-textfield_0.14.0-canary.dc04abe1.0_1583877738197_0.8740571114945743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-floating-label":"0.14.0-canary.04ccbc88.0","@material/mwc-icon":"0.14.0-canary.04ccbc88.0","@material/mwc-line-ripple":"0.14.0-canary.04ccbc88.0","@material/mwc-notched-outline":"0.14.0-canary.04ccbc88.0","@material/shape":"=6.0.0-canary.1ae8130ce.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XZ1PmBxf89AXvmQ7WY4szQiYGkZLL5jZkrNEpgTwtSpa1VLGtH8bxrDZYeYhnqS3XQX53alhcB7OjempFL+Thw==","shasum":"5d42ef63e2295488566a271f428d92b160a68ba7","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.04ccbc88.0.tgz","fileCount":20,"unpackedSize":281556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIyCRA9TVsSAnZWagAAEY4P/jDkr6MKp62RZLhCkYDW\n1a6tugTJE5HTQeo91nWg4jK/VQj3VoNFK4wG3uaOkqhr8OWf7DKzGw1Pmicm\nPVrrUMpanHmaG+CmDwCQs5cOG0odWzCfHrTW6vKbBOCb1i8PRpvXm7YL/0Fp\noBUHO99kbBH5468LTheoJZPzxWJFAe2TXSCOldOhJVcRxTgTbd6bjbaWjiBA\nrPob4uGbTKwQohypA7Q5hatKobkJwQycwj6bSOLSUyQjLZucfEmWS+2vkfT1\nd65xQluGiu0U7B93cOo2scFsVzZ7zmmLvyzaH9qol8sVbfumrjDb3pr3JfK7\nwRMs34adsl/DG9e+tsT6ZcDzNBs5B+IRT91f3rJU+YFZcHjjI19+wsVcyEuK\ncHOlnHbFbz317NTYTF+jh+f2YAcgGNjIIeVtlDRzvXickwGAWkqlUd2nMzBk\n7cBzlwQkmHEqwVrL2Ml0hTL/lfGGA4jTumF1EOdzG0jZc1aTdpZNtIfRNXWo\npt/jnfsby/RhCYZoJj15aQFyNw8+G3JAOTZMxkB2JhSvs911YGYOXQz6kKi9\nZ2xi62lFnc9MNQVeXcxrpUqs65eka7TUB0LJBLxDEVEeiuRsAqcu3fOPvNB5\n3zUipykilCwu/kvH9Cah3lV5fKUQlTWG9429quzDJA45dMsRauY/9aZYbJIq\nEbB7\r\n=75tN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaBZsB4Z6ejO3Pb8GD7Lrx1eAO6b3Wm5NQeP5E6OgqKAiEAreMEJx6izjMzbvV3Ws5h03JlZhuSuKsdMZQpeM11QNM="}]},"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-textfield_0.14.0-canary.04ccbc88.0_1583886897758_0.9605766373513491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-floating-label":"0.14.0-canary.55338c25.0","@material/mwc-icon":"0.14.0-canary.55338c25.0","@material/mwc-line-ripple":"0.14.0-canary.55338c25.0","@material/mwc-notched-outline":"0.14.0-canary.55338c25.0","@material/shape":"=6.0.0-canary.1ae8130ce.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-duZk9JTTMf12w7fcxF2AFmToA5OtT3QHX6QX+wTOfOFkG/8A86lWXulG1tNQKkgX/D+M6KBaVx0NRM98y+kGTA==","shasum":"dd38cc4883e16fae8bc87fd1f8bcfb60a87fa81b","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.55338c25.0.tgz","fileCount":20,"unpackedSize":281583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXBCRA9TVsSAnZWagAAONgP/0t6f/HR7tFALOPe36Q6\n3CoHrs2enrFWoWVufYboKvZY0DQ8kc7/8triz8oCqi9tY44ulbZPib8gm0xo\nhPp+5ArR32Xmc9HgYYeMoTGw4muYNsbCEjRHpGyl1WbrYctFPKTqy3XTCq0m\nlbixltyOqazYrv1FVEy15Kk3q9JpPcFSLOWSFkETHo5w2WOxJN5ZzKhfh9Rd\n5EnAy+rfjv85VW+smtL5y0vTJ+j9Zy7wK3IQDLrTiC+/GhHCCiyrXcFBU1rG\nA5CUUsBqmbuOiFD5TLrF+UEq+ILMQOU+n7tdVCu2hXXrMypYMfVZFPw+RRRe\nvxnzuzwZU6kRLj86ApOpuKZiR8DmcoNSienX0yMO4YOD4VZMUWFBDc0SmjBA\nobqleIOgjDIPAPteIUein8hB14eFOVbjBAxpMx+OJqiQ+kOXUGxV3U1XWkp5\nBBHdB0BbBzse2Bqub0ZQhzGqLs/myBXAcJd8IlYDBiParbuo9EPs/KuZueU/\nmD1V72tSL1uloAlvBNEjxxCuafG25bi4elOb0gb6p9CpuoBz7cW+REeAlhz5\nkgOh0lyL6XwsIwRgfyIZBMJZnvmuu5c9+YaZZZwuLkp1aNyRZRevUTK5Qld3\n2NazRvkNChCqFSH6XIdiu3t8aQZY0rHCS9pYIakmEFCgId+fCLdZm2rtZPpB\n38OO\r\n=FtLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3W4USN5mPwuRmdjYGMezwSWFuss8hfrd+1AvQNA2M+AiAUfjSk4+rJiGmdJFFQFmD1tQYfKI6Wjhm12sFVPeXC7g=="}]},"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-textfield_0.14.0-canary.55338c25.0_1583908289516_0.3964472026599022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-floating-label":"0.14.0-canary.b7e388f3.0","@material/mwc-icon":"0.14.0-canary.b7e388f3.0","@material/mwc-line-ripple":"0.14.0-canary.b7e388f3.0","@material/mwc-notched-outline":"0.14.0-canary.b7e388f3.0","@material/shape":"=6.0.0-canary.1ae8130ce.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HBjlT9FMJ9FxoNZTB64rQ//TeEptzWCyl3JOne5BxwV8Ab6XXoB4EsMQNRjfckMI4hy6LkGbVkKUhT4y67GpvA==","shasum":"df566f24a1acfb67676aee4a14b4983e6e70568b","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.b7e388f3.0.tgz","fileCount":20,"unpackedSize":281583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfjCRA9TVsSAnZWagAAt6oP/1659Lqw8qcePWuH6/KV\nnXizQHH4bMCe914uGjDd38SmB+ccD+hW/ubW3gpMwIQNfJiUc5BwYJz8Sz6K\n9ox88nlL9tPLol5P+1tLd00oK5KlIPev9eHekp/Yxv24zc0K3zsf4ZPhXNRk\nd+DfDiNsQ01Gdm7XbC6gXrO/8eXkK4ktfSyJvo6g0PbQGWyz8iyVP9KbONEF\nC5EWs7Skdgzrghf6PDjMTfEbrW2Zq4i+FFNTpxMzXmlr9Q+bo0/OHvl111rM\nWb1rvZ4xczq3wy8Ps8IFpIwzv05ytIqB3MiAoOFt+urlAt4iGF/dUxXn1wCp\n59Y4+rYdEslqgHPrG4a14miosXTfp9skYVhXiQZjHzdL1W2DPqUKNPpcOTNp\nJLRSnSvSw419gJTF9YX8rQXPYyA7lUdNxe67IcvvunurOehBJ0T/A6uZ3Ak+\n/2qZx4/wFwmvDc6Bqlk4k+UNRHzVaOFc0wE/gyVT+b/yyzraTvxmT+/e86ne\nKKjuqJtGTllRCqpR8f0Z7lOSr5KJM7vWHMZ2w/ndzCAch72q58Ys/t41VaXN\nBAkvxUHs5A5inC2aQVLiE7olJ4osStJP06Rubkz/JQQ0WsLjLQZupj8aumSD\n0j+F4iPVp4IxwmiwlLOhxorosC0cp2E8Gk6+T4m8LDRKHkcvmUZ0tu7Xh3rK\ndr8I\r\n=QAGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl7jSErw6FNoEA7xSQP4lWsqcjUlduswvZDmRQ5Ty22AIgOkAEk1V3KJakEr1TSjR38O4ixNTjcCMBh//5m2y2xKg="}]},"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-textfield_0.14.0-canary.b7e388f3.0_1583957987030_0.019452063749535453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.1ae8130ce.0","@material/line-ripple":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-floating-label":"0.14.0-canary.b3211481.0","@material/mwc-icon":"0.14.0-canary.b3211481.0","@material/mwc-line-ripple":"0.14.0-canary.b3211481.0","@material/mwc-notched-outline":"0.14.0-canary.b3211481.0","@material/shape":"=6.0.0-canary.1ae8130ce.0","@material/textfield":"=6.0.0-canary.1ae8130ce.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-REtO2bFXz01Ur/AySchjZuCQ7MhHCb3y2mipnNbwBPDRtv5F7EEbBkYRqCli7IH4i38VpVlnorsBaYiuDtKE3w==","shasum":"cb0e34fbb767217503e59223158c82a9dac03297","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.b3211481.0.tgz","fileCount":20,"unpackedSize":281583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjeCRA9TVsSAnZWagAAtEwQAIVbVhVsDt1bzmFOloYV\ndAHRu2vpKvMF9bCUHAzuAOsf50fnY8vZwmG8TJ3J6arolk1VT5uULPN96oPB\njN43A1JOqwr+wxOa0OJEjymbvsBCAGYCBpB1Z8Q2wlGyl+ljBTux9+DoVdzf\nYME8HNyC0GDYcrOrruNSSSwAKv9cjUBMz2JZ5BHQSL51aaHXw8AXGF9hA/VX\nU5cfHLq6M3z+o9Aj5xuBewXwvFt32vw6gGx7z4XK/tOx5ZYHLsQ6taJqjmfV\n8GYHvZuCMUHsu+InUvb1+qcUq/HjzUC3p0HqyKNqZBv4fPL71GdjcBgshvOp\nZblZfFvFs9emHM395oyiVdJGupgEFP4yfkUyrgpPMolhD99yxaOd9XcuKMNZ\n46N3UITyvISRqdyDOQ+ASp1g44yU748JQKMf1Bcbmf6yQpG6x8ysFPocHkFw\nyIKYCc/KOIXAcQ1t05XoGlXoU+D9qTVK0BsZrGNOF8bT18DCNgNkrWmhIfaW\n27BUnNEu/Vy84c273ssrDF2Lbo+ejRgg/PHdS0LOF6oWf5i1eWpugQ6ssRVc\nxsCCH8Xv0a//K9ritzH0wpknjkhimd930KyZQxQhbGOM3uO4WpHDMcyG+a8G\nfDAHwG5AUu25QUJwKvCLxl6GcOA0CI2oKDlllu/eLVqiA5thIw1XLszlOFkF\nRtvT\r\n=/eew\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYHbNPGRGecLTAYv5946908IhgZozufptsPuo1JcZdRgIgKcn8M8ViB4s6ZDbb2syWJVdrMVtc/fDb4k1Fsoes2xg="}]},"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-textfield_0.14.0-canary.b3211481.0_1583958237753_0.15396870890945613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.d5808057f.0","@material/line-ripple":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-floating-label":"0.14.0-canary.0b5c7f23.0","@material/mwc-icon":"0.14.0-canary.0b5c7f23.0","@material/mwc-line-ripple":"0.14.0-canary.0b5c7f23.0","@material/mwc-notched-outline":"0.14.0-canary.0b5c7f23.0","@material/shape":"=6.0.0-canary.d5808057f.0","@material/textfield":"=6.0.0-canary.d5808057f.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xbImIzoAI7pEHKvSG6A7CXl98/cpOs0ewGz1hRJBc3MfoQYzdaqSlOvqfgVqBsbKDU6xW0ZdKk2F6ECF2KXDcg==","shasum":"a1e53b4423f328168e02dd9c3a558254f06bc320","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.0b5c7f23.0.tgz","fileCount":20,"unpackedSize":281909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3yCRA9TVsSAnZWagAAVIUP/15VKHc7I4gcXvOWQWT9\nAK2k2T18Ng2NoN4MbLmUhTzauLrOiGCKi5mj1fAv1EoqIz1FBNMCPk2NjKA3\nk/8CLWiEZyq9pCsZeoXrXGqX+el7ByJeGlDoG+SqgpZkm9yldnnDfgZIkeEo\nIDGrF42ChCRZQc+Ro6OdTNCVhL9xXOn5vTWgzrNh3ZTcz62r+OW3TK+9z2S3\nzqlzRJDUw24G/0BdvbbE1G3bhNqL6+UNRZ4K5kBzyPAFPSfKrgP5SmEUxbqT\nZfLdzcwM9buh48SKIO30/DbgW3WSEdm/1Ym9hZC45LTNnJPzxA8pln4ltoPX\nPN5VfQuK5Bp1c9JDMZZMXLsPES3+m1kQO3IBig7zQwQzhPf313oHVnL2aK12\n4gHWRdEYr3pL4G6BMzcZe+rNVqV8fS5JH8hYh+TBhKCDxRyjx9d/6V3UFkGC\nmni589QwsEZck47YFRF7aG/g+P/RncNZzMlAra0KUzthpV/r7ULbI/WoNTwe\nxIouJY9Ng9zsD5bzxewmh+LBGjuPb5dHci+FSWkL33cQ3cCmOuNX7tO/PDN8\n+EYDB+SyBLX7LPNxO3iU2Ll6U6d8QF7MNWf7b/aKOzf5VgK6y0y/hdJVvq+5\nOAut+lke9PL94AFrb00SkWHknzWEZPY9QGg1nlA/MLOWMU5cRmCVN1VFF7Bv\n67G1\r\n=qbMT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHeSwDJy6vEiBhPiks99L6EuskELItEA4+wjfKO8j70oAiEA7Bh4Av1CC2lqA28M7jBrwjK7WdNjmO3BtA6l5hTGaXY="}]},"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-textfield_0.14.0-canary.0b5c7f23.0_1583963633625_0.28389480857428473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.bec065920.0","@material/line-ripple":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-floating-label":"0.14.0-canary.6c0f0b27.0","@material/mwc-icon":"0.14.0-canary.6c0f0b27.0","@material/mwc-line-ripple":"0.14.0-canary.6c0f0b27.0","@material/mwc-notched-outline":"0.14.0-canary.6c0f0b27.0","@material/shape":"=6.0.0-canary.bec065920.0","@material/textfield":"=6.0.0-canary.bec065920.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WTCeo1Y0JyoZaBxngGSE7RMHLwUGumhmxKAiMiItyhxZjopW7b3oFYt/0bAkI6qchjY1U/VzJoYgspvkmQcmag==","shasum":"81e0957873db9c82a10a28182b8a0f84388beb7d","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.6c0f0b27.0.tgz","fileCount":20,"unpackedSize":281909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbYCRA9TVsSAnZWagAAo10P/2W7zFwUtCL0DdfpPwVD\nGrsoo8BKIchXHS2kh1SoNtmBmKUATV8J7WQKGevTTn13DJnCbQ342TUI6xyt\nz2GN3281sij7bJpzF41tvMBiZISvyLubFmmqYNeTA4q7pC6LG421FmqEt2Y5\nibkcuJzFfaucIWLiF2kfWAcs3NsONZZHfkWt0vBYgl7UX8ozEnGdWzcsmthZ\n8QdmK1Y2W/9Uj3CBy0eGyLnQphld06kYqaR9L6Z3oaVX3dA5B1RKedggsesf\nkmfexnEgrY3XDOmNSvt7lbIMNTjuB1KA7mpTa/KaPvrALzB9Dt6seObmDgeA\nPA5bGouKX8G0isZNr51/SX4pbA/RqpsTWH5uA4qVTu1+cvA9Z3qxhIjxLJwu\n7jHlWnI6jQZHsM7WPnee44hHc8zMvPgXs80XP7hoK8s740FIIH65utlTutId\ng9CWymGIyhdiJkIf2D3y6bVaqXiiYYVCMO8eomPpWI9VWsLcI5d8GPjT4nKB\nsQdESdCGjQ/+Kpmc9MY43bwI8PGcZiFQyN6G4FoUys2C7Al6Fw1Dgww9Rnka\nY8gMeuDs5bYAD/whp3k6YrBgjJ/WCbgMqm8IIHe44X7ooeU0ieDI0QJ12KAK\nlR3p9JJRI/SCm/AvYGUAcs2gIeF6ysPT/OtkdJPQryHyPxzx3JMfsDeQ/N43\nS982\r\n=ZAyA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAykkEnJZJmwklV0900hPZZB8XNZNjEYsp9yWxlZfy9VAiA4YMgE1jEd06Lu7gsEGi8gr9SHaiQqwuFyaOX31U0MvA=="}]},"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-textfield_0.14.0-canary.6c0f0b27.0_1584047832261_0.9440667236476628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.bec065920.0","@material/line-ripple":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-floating-label":"0.14.0-canary.b6c53425.0","@material/mwc-icon":"0.14.0-canary.b6c53425.0","@material/mwc-line-ripple":"0.14.0-canary.b6c53425.0","@material/mwc-notched-outline":"0.14.0-canary.b6c53425.0","@material/shape":"=6.0.0-canary.bec065920.0","@material/textfield":"=6.0.0-canary.bec065920.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UftHzBrPuXgXkQ5GKFlrWZDrXhJFYAuTUlHMQlI+npQoiFxhbtV3Qva2Do9HvaUEOC2SX8bkJazqFuCjfkfytw==","shasum":"b93a8d5b751a56797bbc3f17bb1d89a7368a8357","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.b6c53425.0.tgz","fileCount":20,"unpackedSize":281909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7r7CRA9TVsSAnZWagAAbhcP+wWnWwyPBOmKEqlffqXZ\ncHR1px5qDmeb9SKogqBNzHMzY3r8wLTuT9jpxr/VsNDljDY0RmyW06zHyG/j\nASIMn6RNdhvqpagNNVAYXKpEDNuLegZFBv0BTev7EkeLtvkOpiCrogS8arHj\nFiJF299Djr+SWrBXEfdu1aAmgZB3VLjP0sgYEuTCcdzcbio9y2z2ENTKcAre\nxcRpWYlXFNUERYWqOJeJ9OGFzyezvqDJMHv/FqofrOh9Ar+GJ2YV94vTLCNO\nnzq6xE8hRP/paUoaEQbRz0lgIJgCxgI9qgP2nvzaM6cnL882PKuKbbECSsDI\nKBI44LH/4XyMLw+RfdJX8zrDJ/41z9EnGAQGZ7ZWz6GmdhImBGC/CJF8vMHI\nyoMQWARItxhduFxLFxh+K67WWYiEA1MGTpvXStR+cGUFxS36akPbgQ/lpqHt\nrInAdSUScNvqzmMl7NsfUDFZSlukIGD9iWQhL+AxEY4HaLshFgc5mvoIlIWm\nbPzmMqfVE3c+vCbNfPxWpdbAGHKNJgFXVQBPbikC5BIfNfNsVu6Hitibnimw\nHoQK04Fobc/vFeAppsorAn6+CY9UBIcs0SsHx251mEGViTyeeFtI+ibBIs4L\n7XTrhDlfO2O/0p0PrFHb6/SxcZ8jUiGLRTMrlmUduPOOMNU95ygKyOh4sg47\nuwQJ\r\n=SWRB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzbVNWGZWXwsRjok5jFUuxvpD/X1UkI1lmPKrOUuq5RAIhAIqWLSmuYs7TE6uAsI9qaep5q6obk4Yj4Gn8QAVsa3Lg"}]},"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-textfield_0.14.0-canary.b6c53425.0_1584118522569_0.919247991941494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.bec065920.0","@material/line-ripple":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-floating-label":"0.14.0-canary.306cabed.0","@material/mwc-icon":"0.14.0-canary.306cabed.0","@material/mwc-line-ripple":"0.14.0-canary.306cabed.0","@material/mwc-notched-outline":"0.14.0-canary.306cabed.0","@material/shape":"=6.0.0-canary.bec065920.0","@material/textfield":"=6.0.0-canary.bec065920.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tedibDIddBj+uAV3gnCrx6cu74q5+hBZ/NKPAv7HpI5tYkA/ggIF/gMdEvKQjfBvICRLsNTHplPNdgBOQ8HFFg==","shasum":"5d6b5fbf844dbd67a2c6bb3c8640008d8edd00d1","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.306cabed.0.tgz","fileCount":20,"unpackedSize":281909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT54CRA9TVsSAnZWagAAggMQAJx3hkF8Nd6iycJQCqhl\nVnSOcncWTW1+fD9wMnpsWDefuK3MGq6oKWeQ0KiMSI95X4DXGG4sESfINaiv\n9oco6bEwi1cTras1Dtns/9Yi4Vb+amrYNwhbP0dEehpXMJwKXDjTa7VhGmg7\nu1W7bS7fAmqT8TkJyMaHRSUiiazXrJmClJFMTCTqz/TAgp2cvXVY/1KtVWaa\nJu07OxgzU6bXx7I66LE9TTYPJJDSCwnkj5aiP4RIfGNTx/fLlXrpdrtgvqpW\nzq/Mj66fT/DSA0dwsdMHfhvnZTKqX5k8owth8+7TJcC97Serp4CCr0U5BhJz\nyln6AcT7v0Gs0dS8tEiFWNURESZyKWlFHpla9siMya1fJvXAuCU259BaP10x\ns5+IUOgNng8n4GD6RCmyu7UWO2QKPejt90rvOvLsU1HG1wEc42EQYjWe7vcd\nNARiSu6DSXrefpM3A/zO8woDbqO+RpaMcjX56JM48007H9AnW2P6TBzLeQX6\nXIpTPpxdqyl0Q9EQaaCSi3Wp3a0kCMvM3hEdDP0h6cN2EsTESXfYYFTujIgb\n4WDuVpUSxkM6tZ7qyBnsS/DoX1zPXBZ7lTMwuCt/sb/0g9+PxZiGnV4HPOqz\nzPFq9+zaYMubBAHUdJQaaGbNEY8QMBgy/DmfctRGTfPi3kjNi2ovpcjU7QI/\nQgyw\r\n=jYqn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDucTlgVb/gGaKAcFNIPLK8macrGQyub5bldSbipwJUfgIgLmQWLAVE9oTgVEuhNEN90Dc8fRaAyDJC23wpq7l6T5Q="}]},"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-textfield_0.14.0-canary.306cabed.0_1584479863716_0.20252263599576747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.776291ef0.0","@material/line-ripple":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-floating-label":"0.14.0-canary.4e250cbc.0","@material/mwc-icon":"0.14.0-canary.4e250cbc.0","@material/mwc-line-ripple":"0.14.0-canary.4e250cbc.0","@material/mwc-notched-outline":"0.14.0-canary.4e250cbc.0","@material/shape":"=6.0.0-canary.776291ef0.0","@material/textfield":"=6.0.0-canary.776291ef0.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-s7W6hdYUzRwcbfBsAZ0kX7qICiPExsWoHz8nurXJJJCb8EWKMUkgzIo0vCm1YgC68v2iImaD8j29Ms90sptZUw==","shasum":"54eebb421a221feab2538ee33177d4d25d472f96","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.4e250cbc.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/1CRA9TVsSAnZWagAAnD4P/3lFuofhjouw5ZJ9/pw8\nv91JDje2ClmjRKM62kMYFKf6RPFBZIh2T0mIAmMTggI2/lNUdHOLUfebrXLJ\nz0vN3jU7eVoRh68eO5EvSFB5GXau6U07WyCnmRd8+UaHegkWv15vexa4CnBz\n3hZrX00p899ILoi8dGC7vQBC1sD4G5J8hj4hNQaUHSnBWA3UVi7PAtDZeyGr\nfDqBMyh8gSHsa6/WLRvHpP1V5PaR9X/n/A4gwBt/B9ks/r53vThwWM4/OqTx\n8mCns5R++zLk1WXEfNC+XqnTlN6f1Onn7Rv7xgtfUrnNtHD3SJ21ubdTiVrG\n1q5UDrS1O44dqcarfat7UoDlGNxRXKsQZkaTCvJxsloQ/X+zrreceLPvPDWG\nNffuaErAZ1a8zDVMbLp6CJ++UWk5y9+lpPV3BYFsZQQebsUybIgLlmxGRPl2\n49GAalEVg4ZRXat/JimnIoc5I5Gy0SCwY3mFxf9qKI9FWwpcWidizRPWzmq5\nmpaG8KurcZu5UhxRQNnYafb9LNmLB7Yx9QcBSnSORXbLzU66YTJBjRAyKo62\nkXUfCqOTBB+An/HANEHUelwTyrYF8bfcZvPsPD8WnnqVyT0VCIPzoBS9Rk1Z\nijjrEQ7jMNpFE2Em0UgxuV3tq4AG64I9Zkv/oeqS0rg836spN04rhVPwqwyU\nkLUd\r\n=hDoL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHA7X6yswFDpeUdTHewpsAHKm9GgtU9syviYJlVgXmKAiBnoqMRJLfXsedeYvzb1+27iaJhxHWkGDTMkWoCNYHFJw=="}]},"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-textfield_0.14.0-canary.4e250cbc.0_1584480244936_0.023456799463616784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6b48781bf.0","@material/line-ripple":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-floating-label":"0.14.0-canary.ff82d9ec.0","@material/mwc-icon":"0.14.0-canary.ff82d9ec.0","@material/mwc-line-ripple":"0.14.0-canary.ff82d9ec.0","@material/mwc-notched-outline":"0.14.0-canary.ff82d9ec.0","@material/shape":"=6.0.0-canary.6b48781bf.0","@material/textfield":"=6.0.0-canary.6b48781bf.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c0tNbQbdZoQ3lAzoJKxK2sFePVCVrt8ZyJOxrBXOY94PJp6DT3O07xyR3zqKdlC2UwvunNRFK6DMvVJmX8XO7w==","shasum":"d2f82f8d54b2fd2bc99d9436b44c5ecf7fd811fe","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.ff82d9ec.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmY8CRA9TVsSAnZWagAAH4wP/2fHdmHUaFBGmoNJbWkz\nKUVFD1Fdh+M2ymk6LgiRwdr1DmBlSzCIiW77r3hS6oTjNrbqzbq864Xjl7Xo\nI1xPeD1pekjs/qdw/Y5Cw2ECugJr1qbTG44ElYGPRhHCZ7SNLNugOKZ6pcyP\n8cqqMJggsBQyT++6SftolUyMBxpNhGBA+1xINQ3vajgPHXC2g2JsYaeG47ht\nlYC6EjKbGP9eP21JCFTioUJoxsexvE3DTab2xhVRuS3WinX9JnnsiSLJTN1V\ndBq99N2B3u1oUngIOaNCL83LSLC+rvK4yVlfZWcFfmSZXLSDt8llUuoVWSXS\nwx9gyHNNbxzooTwaygSsShYlkHVxt5ihIXh7soFm7jJgDA+S19XFXyxnm0Em\nNpKbbtLDRiaI2H3owxb9O6GyE0zESuRyrqpT1jrGTR+/t2N5y53Snv5wVQzN\n3I12Yvi2HZRvkanzmObSUqEtVv6Rm9ElW9o+Z6O85YiZmlZkTW4Uc6VlAovI\n3VsAO0DVbvC+a+GZmOnpdTVIwROuGGjnIJxhSo7qefUUeQh3oQJpkhuFtNs9\nAuMX1bTw8mKvObdig9o17m46dIL6WvsYt+ad+RkxSs0QzksCmy8PYw/PBTLu\nxBDHFOTMcTqNdvdzmIau2bclt+vhA0Xj4UxwsmU5AP88aD0KsAZcJBL5UlgF\nt7G6\r\n=eWvV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNyOscVg9/ODMM5uYsfcog1dCl/dz1L5wujsHMg3apbAiAL0Z2On2IAw5tQGKLPRTA6c980ur6T1su+7w0PIRS4og=="}]},"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-textfield_0.14.0-canary.ff82d9ec.0_1584555580351_0.5571295545622867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6b48781bf.0","@material/line-ripple":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-floating-label":"0.14.0-canary.f50f48ef.0","@material/mwc-icon":"0.14.0-canary.f50f48ef.0","@material/mwc-line-ripple":"0.14.0-canary.f50f48ef.0","@material/mwc-notched-outline":"0.14.0-canary.f50f48ef.0","@material/shape":"=6.0.0-canary.6b48781bf.0","@material/textfield":"=6.0.0-canary.6b48781bf.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kS2nayqCWuGLGEjtLOy2ZdKvGJaXAx3xUlcn0uFRTdxA2LEHTBRoL/ZBvLuUmDcwtYiHSAu8KsAxJnHMHurbUg==","shasum":"ab5d156d19060a6710f43f6eb2744dd281780d62","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.f50f48ef.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AZCRA9TVsSAnZWagAAbxIP/3uU9ogXWWKM4hvkPkPJ\nNJOcWUewaMf102Ztgsh2vcfJTSC1jbsQtt1euS7Li9dHHF/hYIHPRPK+uStw\nD3enjgjzOGLBaD7CETO7vs9/W3eRMS3lTDezjZ8BXVcgjM3vk2L3jch4t5aX\nxZOXZwh1aTBird6qKtg7FYUeakzHnQvO9AzODlsw+2I1ElPQvTr1/+GO11Jm\nbibAGvqOoOWt/kE3c9hBeq0BH2qrtd8W3tvJCJ6u5G5ktH65Ia3AHL+bMphb\n3pdyZEjsXtHF4Q0TqlHCyqznacdpmFrIguBwjN3JemDcOU9AhEHVoIbINbQM\npZ96xbElLbKhtFHz9gsPJm3g7r55TQ6ziOxLbnJLksJaa18Wyp5L6Ga3ThkY\n6GmMtvV2V9j/xxdc1RJusalM4RHmohFP8RqZ7/bQ/9gvWXNFqMPU7jaWYbkI\nlAA69zRIY9ibcs30n3sIeO/z6phjqYBq8N+/E4dmhkeYC0SihkrTtoBilZ4z\noPqENPj1FnotLXOhQE/9hv1ZxcnqqrBFV9PgaGWahKW+avgdHV8RDez5G5VV\nxVwrrfWIjuqqSoyAVPZauFXbdr5sUTZi0g2a4Ng0d49HQGCpodUVIqjuCZvw\nDuE1lrtiZOPrhMpBySx9NGDB+Yv9KSEqrbWcKENnvFjeKWW/TrLDajlf92tR\n/fGZ\r\n=E/aF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJ5Vx/Nib9IrV8aSTf7lmsttf/fUFJCZARjMiFabFYyAiEAjaVFPbVqU7b3vDLI1ZxtlZN/ZERJlPtU5xRfTMaqHUs="}]},"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-textfield_0.14.0-canary.f50f48ef.0_1584644121351_0.509242423527877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.a88c8e4dc.0","@material/line-ripple":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-floating-label":"0.14.0-canary.134cf877.0","@material/mwc-icon":"0.14.0-canary.134cf877.0","@material/mwc-line-ripple":"0.14.0-canary.134cf877.0","@material/mwc-notched-outline":"0.14.0-canary.134cf877.0","@material/shape":"=6.0.0-canary.a88c8e4dc.0","@material/textfield":"=6.0.0-canary.a88c8e4dc.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mqGxmBlUBpKIcoSPuGor2r3IX+AmceZm9BpAJIIl9J/WXnWJrwy9ERYOc4ECbeuikfdDh7N6nd1DmaoEwdpPRg==","shasum":"8fd575d313d9d168de8c27b3d3abf22f113b99cd","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0-canary.134cf877.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h1CRA9TVsSAnZWagAAVCAQAI494/u0Lkj4YaeNAd85\nC3XuvuvsBESt72mJuX35PVCQvOMn+B1dvDYOrGnQBAZCs53T6TZSdTIjj1WB\nU+S0BPdeL3EgbUVXXphkm14nLGvTM8M1ZqDuiDQ9tuP9jFkSdurLmZUpliRz\n2ISfLlVRIUsN4C6p7TGAFGJtgOLngXwzjTPPf7OKpMZ1pQo6r1WJ/h2C5dTZ\nxqTQJJwXL29NkOgYSgHhG9yBbgwCy47mzs+ZA18+RkJ7fl1LsdGNRzjqp9gO\nG+JdJwmSLGpg3sBO/83wBdZGfQEDNCZ/v9rnGAejWt0Wgoe6dwRlkmdKOTI7\n8ia9jtvXoKmAoobeW4N94TQnOYvvGQ1cuRH9c0hQoYuN7E+SMI+8na4EuZP/\nudXZ2IBEUTUMht1+LweoGgRLZlZRurtqQ7nQT2/+s13Qrzs5H9sxssMnOOMu\n9QZ0khUyU9LJU67/HzNEHJweJ7UbBDJzmrCjoE2LSBVvPcRulg3viRfIr8Sm\n0aLVNxyAP2XF9zZrA/hEY6GSdRbww27/NxL6ymWsdx9DioIFl+j0Z+j1VdgC\ncJMx5Gd1XPE1gt5sbaMyfdeToqMz8dDQzEtw9nRYvk7oJjZTXaUC7JNarg/G\nqim+Xl/v8GLltRXiJV5snC3CDavB7Hl3ZLuQZ/cmEGb7P9wKtO8JocunYerY\ns9BJ\r\n=MkBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8uzt0CsvRG3ZGMt51pDbtVciB9xJwU3R1XYW/OvWqswIhAM0jPbWIPt5ZIGQ81NWnzdmero4x0GudXUl6k3cNCo26"}]},"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-textfield_0.14.0-canary.134cf877.0_1584650356914_0.6501369438831497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.a88c8e4dc.0","@material/line-ripple":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/mwc-floating-label":"^0.14.0","@material/mwc-icon":"^0.14.0","@material/mwc-line-ripple":"^0.14.0","@material/mwc-notched-outline":"^0.14.0","@material/shape":"=6.0.0-canary.a88c8e4dc.0","@material/textfield":"=6.0.0-canary.a88c8e4dc.0","@material/theme":"=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-textfield@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-Pjk6P91QqohVyVwOIyvsswxfpFDI6PK9E+6IXPUIN0tNilzIuuHqnXS1GiF8wphknu2Hfwu+dUjRkecBWUpblw==","shasum":"98b599863d60218b9b0a7a32636af9ec0d9bc3cb","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.0.tgz","fileCount":20,"unpackedSize":254521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QFCRA9TVsSAnZWagAAAPsP/233VvjidGQxuAim/nXn\n0qs29kfY3/AXavEdW1YUTeQJ2EmcG7cGOrWnXtd8Cjfh4u0Kx7j9GZe8TRSS\n/Tjb9XLkvYY7BVcZjATahyypdwCKosEHB/gqkeLn62F5pZqUNvfBlxxv9KWb\nTm7fw+GgZQW03f0CRh0Rhmca2PlERyRYfNg7+5q90+2uPNLCRY00FjVkKwYZ\nsreDlqs6edzw3WEaLR8EYzOG0JrkpvQFFh8m8YsZNbcSgjsibZIYc5p/381z\nnoD10UDhGT5KtLq2a4S2CYxQf4GdAW6RpDG/KHtbstjnV7pImiuA0pDNK7aT\npW/9Ki5SYi94MW9APrh1gHwyF49J7nbEcg0FjbLoavbgvIo1aVImbwJhnOig\nlO3jdtWhTl+Gqr1EI4NQbW+lNEWcc9db9cupP20o6Od7svmtZ2bQSycxIUU7\neGnJTEVwOaszOwH/XeJII6PB1TrepYk6G2SJZ2g6VSvoqe2DXrwhqWnQEDip\nUW8ETH55a4aewvhkDcsj3r4EyVBeOQtSzsuWLOd9RB1NcX5M5yrSYCQCNb60\ntGwF5m2nyXQ71T9tvGJDw36mXUKaFD0x29z6itew4MzeZht7pyL4jEd2qen9\n/yWGDcqtok4MZFETysU/DBpJoa55xftm3hgvaEaSKrg8/5NbJ9++JSIDSY0g\n8Vh3\r\n=Txnx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdt3APv5Tn94+VjIE2ZQswRgtTcZM7k1HWEdITGkS5HAIgepDRZXwEQL5HljYmI1UWJrECPGbcQYDJXxZ9R/a54OI="}]},"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-textfield_0.14.0_1584653316912_0.7755058809809381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.a88c8e4dc.0","@material/line-ripple":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-floating-label":"0.15.0-canary.2c1a4913.0","@material/mwc-icon":"0.15.0-canary.2c1a4913.0","@material/mwc-line-ripple":"0.15.0-canary.2c1a4913.0","@material/mwc-notched-outline":"0.15.0-canary.2c1a4913.0","@material/shape":"=6.0.0-canary.a88c8e4dc.0","@material/textfield":"=6.0.0-canary.a88c8e4dc.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-V/zYAX+UWrMMPsu1A4GZKg3YzkpRzspH5+BmomLmYTuPh4hjOPVoansaRfrVUyipYwd7vZrFUpofnmZJpe9z3w==","shasum":"9fd8ceacaee30aa3be343a26a299e8b9ceaa3997","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.2c1a4913.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mmCRA9TVsSAnZWagAACbcP+wZKloTnvlAEsrOgkS+B\nXcSevRsqpeLQfpNRSpvAD4fJvPVjjqT8dJeQ5v09KY5OXpivmMUEs0AenNEd\nRlWdKQ3LcXsvkDVq06KeHZiU+sT6GO2p8ILgwpE1ILuXqgKN/pzAIvq8NAO6\n6ZRnE2Mi6UGKX84Eb/bACMUIIKd+A/khPTDEHqZTtryKaxglTrNafw6aN7Lf\nSYFwE38LMVdKTW7VEPGdrQj41ehgP8K625XQlnRMPHsOuMCc1haRhdNKTJoZ\nrYcjrKiQ1ecijLWV4KKZdq1kIL/DylOd8g1UD8fdbrKw/g/+8gHSm7/VXl82\ns9XKdmlHXjeiFoMactGqTjPzWOGtIU0cp+CbVGLS2NSJ8UHPf6aTRJrrdG5a\nhKJBvWANnfl2Ju0RJ8Pyb2lImGjTy/J1m86ubGXa0FdmOOjPQJc8enND6vrQ\ny4D+lT+apX7Ibo1O6Gqc1GBce9csDZ0H4PbIpnD7HyGvi/Vmnq9k1oiqywcQ\neAVq2afvMZFYajI9GGm+6+7qqmKCudcgyKkHtB4RJcyJ4xWvXPIsS0ZMI5we\nrVGdGBGWijmFB3bqH7CJP+V+pH/v51cXS8+sqDTe7I9yhfWim1ZTXqTKQD8w\nypE0YiyzJM+ChKuQbUelyn/Nhq9ZNMcbkoujLcg4wzs/5DLyw9wqpAI2Jy/o\nCOGf\r\n=u7Al\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMMIvjU0GG9jRWOZkB53/eej6O+YIoHt3WlAs46MnMSAiAvZk+EjwdWWGer1Y6LhUPgy3c6002ZB35FiB9jSS2Fvw=="}]},"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-textfield_0.15.0-canary.2c1a4913.0_1584658854397_0.8227856502040656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.cafe18860.0","@material/line-ripple":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-floating-label":"0.15.0-canary.3a6e481a.0","@material/mwc-icon":"0.15.0-canary.3a6e481a.0","@material/mwc-line-ripple":"0.15.0-canary.3a6e481a.0","@material/mwc-notched-outline":"0.15.0-canary.3a6e481a.0","@material/shape":"=6.0.0-canary.cafe18860.0","@material/textfield":"=6.0.0-canary.cafe18860.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FD7LauH9I6ku5ZczUY2qDjUkmEBfNR/615ba0k/nk8Vi8Goh8znYClbCZG+/H4WL/bFndhs15DeNajt1IQ7p2g==","shasum":"12f7edb09b5d3afc8a2c63abc2166373b9d57fcb","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.3a6e481a.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQe3CRA9TVsSAnZWagAAjGgP/RO4b0dbOQHuBawKwvHD\nES2xOuNtqAQ4Am/e4FcMP4UnSQeN3JZTT+XYY202eCGrvUAapZXTQ3oR/7KJ\npqUFji2ng0h+iEaoCiSfIpn1liNfHivVIizQrdGSJf/gNTfU/wRZBIaQomv5\nPG+XXv0Uhkg4IpNjs4ZO8ulcDVBlNlVrgKJSWhzIKCe8aWGDxHi7IThqB1pw\naCQ9NGzKkxL1wzURu58muUnZf9TWVnEUp3YPx0o4z+KM2bQT35vNdiSap8UX\nNHgZc3euongj8qhYkCm308H41gGKQF2GEOv+JydMi7M9a5QzZDwPXTqfVzTn\nVXkQ3bTMwKGFMyQNrcY0LWhTAB7FpUJfxIabnxq4KceGdKOX0cZLa2b1IePM\nT8AEP0wBmFwDjVP+SOsLxjjYgAmEe00WiVKLvWgB9xXLtfYbCacvgFYGt4uh\nhU6Wucs5IkXpe01iDnlZWKZ5k0lHo4OpZAmJGnMVpcDxjM22zHL7etq2wJpr\nmMsu7NdcEztUacHW3KR+nk34lXUhJOQ7YfQ1SYR2Q2Ou1xgcANDNw+dH7Mzj\n11F71+8MS5CAZSvxbQuYcIvlA/0fgeOzIG4VsHensVqjo58xGlkJNKUQKvnp\nMNe6VX0Oss4ECis4YiWZE9cQ1E0vKwwGzcQRMIXfzY2qLY5NdfiZTaL9DTe5\nPFX/\r\n=MZe3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFZJ28tmZnhmEN5L1jG8T+HP8coZqc2CavskzVuC9uXAiBWHRkc1FVwjRNkedQlhWvwNx67uE0L0cpItcbMvmWIQQ=="}]},"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-textfield_0.15.0-canary.3a6e481a.0_1584727990942_0.10777192145808923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-floating-label":"0.15.0-canary.603d6eb3.0","@material/mwc-icon":"0.15.0-canary.603d6eb3.0","@material/mwc-line-ripple":"0.15.0-canary.603d6eb3.0","@material/mwc-notched-outline":"0.15.0-canary.603d6eb3.0","@material/shape":"=6.0.0-canary.35a32aaea.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XM9vyr41as0tFJQXX+G6UoO1V4R+gOVGESVgGqoXZ37MxegfBr8iIFcnpB+ZUHYakWnQ/5keollP4iH+vMXCcw==","shasum":"e6119963efaf51b8b4a9f4f1b1166b23d80494a4","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.603d6eb3.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTc4CRA9TVsSAnZWagAA9zIP/1XVWVFdNn5gNLGQRrdJ\ni+l1wvXZmkueio5DfrfSGuD2qlV+KEkllqWCdIQlKVkpYrt+RUA13tr6lEmt\nk+tQ1SBdxXfrBX2TzuS4VPt0CQxa3/LvTOen0rPa/PzIg0vNtGV73W1cVQ9v\nYm2SDjOIkWT5mk5WBKGcAImH0LFjcDWnpJ/pfnGWVxiOSBRfwwmuMqJ4qsrd\nKpTezkHHlt46y04Slb7BrUGZjVVhng5vnHh1YIic6Xq3J4Kza/toxuv7m2hT\nXVEIUntYOiAXhFZPY40z26RZsiKLN8xuNUNE/P+lS0bkO1ZOu+xwNTq9HGVF\nvhkCGS+xvtrV84EceBrjT/+YsYW+8wIK8GsTpxXKEwbEli9kjsUC7oY7Vd/R\nZ5blacTzjkUoIb9HwhC31xurBhCjTZtqNLjEGIo1097wJK/vUfrRphSHacuy\nuFAsAOr4SdmPBXx2ggOhmJ0dj/30kcdHtpVWz2NFBfjBDe4ddUE3x13XxvVp\nuh/ox46iN96Mv53pXBGo63fcYoTGlBKSQNfyfR0A6WhYgCwOgMQ0thw7a+RT\nrOQsUp0ruavIzoUK58dy6FOGCTOiWjJdjGK4geSon+jLM1MwGyv/aBMSRXj/\nZGu4TuGmiXjqTzp47jCOZZUlF2nILAzbMcPxhgJvSHhVSWqLamMYjl+ISZos\nKQ+e\r\n=DESo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkCDgUrlBKlHy9CO96rKZyPEn31loFCBZCvga56+YzSAiBuX/kOqgJJv0QMQ1crxPkJnxcCXQ7PA8ljegdYVbNr0A=="}]},"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-textfield_0.15.0-canary.603d6eb3.0_1584740151661_0.3056460229453315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-floating-label":"0.15.0-canary.05c6a93c.0","@material/mwc-icon":"0.15.0-canary.05c6a93c.0","@material/mwc-line-ripple":"0.15.0-canary.05c6a93c.0","@material/mwc-notched-outline":"0.15.0-canary.05c6a93c.0","@material/shape":"=6.0.0-canary.35a32aaea.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xZTi+gcLwT1IZYLc+2J4oCoaIRXGw7HDXOD97TR2o73c1PhNGdDGJt2bSGUxuHbNcmkWuW61L2tmX9UjVDgbsw==","shasum":"f9adeb3b798648b58cdbea057ae55b508f1fdd44","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.05c6a93c.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWNCRA9TVsSAnZWagAAbfUQAJS9sjaffU9w3BKlvmtW\nnfVcX8pIeIQr2JBMgPIxvsZOuN19Uu7VRXY4bm7bbJaAXKd7T+dtTyqI/8KF\nNxnLL8LgIlV2u9isF5svXgD/01CtYAuFisCNy3BGNlyN14545isz95tiIdrR\n1CzLvKVace+rrnxi0q2aJmSHMWAc4FeNDNh7NWaxNvIz7XflAcRDFroNrJ1I\n0s+iu5e50Ch/53nCo/SF0dbPaOgtV6KP5YuRZqK7piOciYrWcfnSPWHDfSMj\nDA6S03b5pb0JfxSE9jg5MeCAdJKKly/9prYa8P0UOA9f05h3Bg7Kq0/BqFox\nI5hW4Dz4I/AdxTdgN6opsHUaegqTmMuIAevVz2iXVv4meNER/oamM+tjfW0I\nC+31se73+LynrqCSYM7HP6VFUMRkW4UkqEmmPPQB/VZpOacXvI9/BDqWESRi\nQrXr6bKiUrCG6jqRKoo48rxWce6dMKJai0ns48h7PYsQ9tXnglf+9fwSrWNN\nDsHBKqD2KS7/vZ+WhZ4BktKwCIUr0GXLgRd8hq2s5wxQbd1J4lyMwrkVSZhG\nY9DrDlbkhRJFKgc6s3H1RvsCfc1kRtqN9hbjfMJINMYe2/m+kfY0mru3XBfq\ntEVJyvbfFJbNyQJ9VZrZ4bAga0W4ctz81Biuh8jgsp2meeacsJrkyBntKp2v\nomiL\r\n=lwTr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHSetscjKTjk9CUf2V6NRp/y5iuMs7PHp1ztQjCZOjvAiEAs0i+5Ax/TbqPl4MF85ypk2zOzk8K4WC8uiQePUp+4oM="}]},"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-textfield_0.15.0-canary.05c6a93c.0_1584981389132_0.9529874667775251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/mwc-floating-label":"^0.14.1","@material/mwc-icon":"^0.14.1","@material/mwc-line-ripple":"^0.14.1","@material/mwc-notched-outline":"^0.14.1","@material/shape":"=6.0.0-canary.35a32aaea.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","@material/theme":"=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-textfield@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-1rZY+L0NSF5gdurqX7UXSpEVrbmfwjfSmi6ckhJZ4A6wpQ1dTfhuin2dUL6iAweX2nLNHXQIChCdjcIeOJMlqA==","shasum":"05214158f780785c88e7d7649ebf99b524eca733","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.14.1.tgz","fileCount":23,"unpackedSize":258569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiUCRA9TVsSAnZWagAAfSEP/2Tf++gtB5ItYAqqS+H8\n6eVDOpy4WBGThwmaqd25yMIrEsdxjIilP+xj/wALC/11E8Q4QEBOM+DY+f/h\nmPvg+w6e9rg0F6SIGYhDdu6eFf/4RJGOR1xxXyxWrUnd0stnMS8hENCxOJyD\n4QvxvZBMD0m+NEBQ5SrWMNlxYm2+Y6QBV9Wc4d5H8XjLnHrx6dVE3XS2mbQa\nY1pZCuq534fp1gP+jITGGXXQ6crBF9j/ZrKhHTlJr2cpVy6MaW6ogm3kRytg\nT7NEiTDTUdwoJF3NSwt9Fo3UPbKxX63baPqmhlNGESXROxpmgHmP3MD6Pxif\nCvN4ZaIW3WOsrEoDfMbpswy1cH145k1rl+RGzkzIJz208iCGrnVC6g9GkoLc\nCLRf8c6ocEVaWetG2wySzbDdC3760tLmS1KAfEy02bjIAHmB0v11VxZ+zF+W\n3gtCFavCjSpIGEXLcWWs/NNejFUnWaKFWzVj8V1M2A/8AMpuREwSKhVBIVN4\n1LPKgVWInIItcivgBXknKWFwDv+wNxFwV0hw+6JTZxErlFi/bYltLNp5h686\nb9jIeXV1LujblClbQVw8/7LpFhMdLavauqW/9KU3BB5tUv/ZeI/RKMM0dasS\nsYY4krkSpmu60I79aCcpKcRDMk99ZlQ9SSUzQ4tuJDIpLB1OaJhD6HTf1V4S\nAE9V\r\n=fkod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrs7YdQH6S2AGBTWxVNDb3sem9dwWKy5PhPWR+y6SO/AiA9iwEF4CAr8FgTQLSbYy2Z9QT52rUc4N/0y649jxhWsQ=="}]},"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-textfield_0.14.1_1584986260181_0.8871830204377218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.35a32aaea.0","@material/line-ripple":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-floating-label":"^0.14.1","@material/mwc-icon":"0.15.0-canary.4e6be3f4.0","@material/mwc-line-ripple":"^0.14.1","@material/mwc-notched-outline":"0.15.0-canary.4e6be3f4.0","@material/shape":"=6.0.0-canary.35a32aaea.0","@material/textfield":"=6.0.0-canary.35a32aaea.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6a9/MU4C+8YYwtRCbddEWoRyAI4GuJd92ACEtK+zAwdMS1kNDVq7grlTME048BttzJcnx03+P5RaVw2i4W2ILw==","shasum":"dc8ebec1088c47fe4334f8a738ebe76752a4d142","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.4e6be3f4.0.tgz","fileCount":20,"unpackedSize":254590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSJCRA9TVsSAnZWagAACDEP/1UjYOXy7O90MFTdfgss\nzHGiW8DudxOlYafeFYeCJ1yuVH/mvgPxORzwfTCp93JBguyavsiW/zm5cQA+\nIjvBZQRd2m/gu8ZyCAqG3mZbdIGbygpASGMTJv7KNjz1xu0eOktFpZSgrNDk\nJtlWqSrhJwn2vMZpKVue4IKk1pf3Ijc91z9WulLm/Q6k9vEn5SAgfGPkQgoE\nzwUS6r1NATESr9COLLvyKr9fv7rvWc4/vfyQAk7Q4u012sShQ+xrzn6VLRUA\nErKXVIK0Fxoi7IBGJPAZLinUfTbia61zfgUAz51fijFiYZUMn84YS4wXKQv8\nLdCEFQ+miyzWs/MTkCeZSSgSyNF74LBgcsNsk4G1o4JAnY4NTBOliBnTUWXP\n32LRI8omGGKZB/N3vBV06KNpmXVENT2b+d0xII5BxdGnzMgKZrvd/ztEDZNd\nKAMs/tYDQK5uuoCe53QWy7FjAdVaVEo20jCu5fi2WRUhw+i+QUFum8ZHZBJp\n4iHLH9i+gn9mHRGVSzo2E6io70jVpqxgIX/7/ERoZrzbGQjChgEx55afr5gN\ndGSVaO+fB4UEEbzKTg55R6Ii5y1M6ylqriqsP3l1OPgl2Z5p3AZOkkrygBjB\n7KcGfx8Hhwe8AhOKWK0XSrVnYhiKjXcvSyR3GMJ8HBW6EdJ/H1t8pwGOinlF\n0ZM6\r\n=UI6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4IW7LdHXuDtMUMPlc9yDjNAPhn3PvVkYpkTq1hqccxAiBZXvqkL85x2xKeWKJMHMdplZZjN39iGZnLF1JQSGTzMA=="}]},"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-textfield_0.15.0-canary.4e6be3f4.0_1585083528886_0.8578777210647592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.8707953b6.0","@material/line-ripple":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-floating-label":"0.15.0-canary.c29a683d.0","@material/mwc-icon":"0.15.0-canary.c29a683d.0","@material/mwc-line-ripple":"0.15.0-canary.c29a683d.0","@material/mwc-notched-outline":"0.15.0-canary.c29a683d.0","@material/shape":"=6.0.0-canary.8707953b6.0","@material/textfield":"=6.0.0-canary.8707953b6.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WlfZ7TrFlyAwqlVsLt+I7lD00gxkFQrNYFQUDUnSWuClYZnHR5METCtV9RxS3HWlsftj/SP6B0VecxE4CwUc/w==","shasum":"97fc0e19b625f092c935ff8072e0e55c9e283861","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.c29a683d.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenizCRA9TVsSAnZWagAAZIwQAJZox7fmVO2Jq2Dm3pn9\nO03ygVXE5RJzrFpfsqblErUgTJpifDuQ8S9wvafZPv2Hgv2nStKvW56fXy1b\nwFFmVOSw0NYWb8C9nzpD620Hv5wbpbXENv2PCTA7jIZO5en4v83IpwbB3B/f\nNeHmbBPEAcY9TAu5sdjCovBE26kjZTwumhDr2xmVUXJy/yFRnpvKloKuyu4g\ncqpW+biBSg+wkfRNBxAd2BF+pXltUxat9pi6rO48+JhldiAjhpq8hKY4Jd0w\n8XYs2xKUQSMWjEuYKZ/uejtD+R2NpZpcp/2xARsDB3igLl3j4QTMbw4cdgeK\nbs3c+6QCitq0ygyFTxmH5HkJJtDvhkW0IDSR4lRIsUl//hSZpNd1KJ9S9tyI\nzTJkPHvfxtFax8JzCM7e0PKSkQStLlety6yoGwxBvE15CDnA/fzezbpghPf1\nyPPveB/5W7UnEuSEcuz+6sLo/odfPyCoglAYRVA8w9tIqC7X9IA3mBnlO+/A\nAFXcXFCrOhhS3YBZsnbwfNiyUikpqihqa4RRVM4se/fH59M+R38W5Iumgww1\n/INksvfCN9S1aVs3CTOlvXnhoAb7A3Q/zA0mJUN2OV0n+VsJ50FIm4K2NWb9\nbGDOFlUwyAflGTmvtD7TYEXyVHB9ZchOZbM+0HshmWV6D6huHTRGmD8WG+Ux\ntewv\r\n=v8eR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBs4tS5cBIE8PUlHnQTQtR8ZcU50pvoWvRbpgO09ZR/yAiEA81qH8nAnHOqBOI/gcfLlOtNpCQjU9a0VNDowFLbESTc="}]},"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-textfield_0.15.0-canary.c29a683d.0_1585084594978_0.017682055904800542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.8707953b6.0","@material/line-ripple":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-floating-label":"0.15.0-canary.fca3dd9d.0","@material/mwc-icon":"0.15.0-canary.fca3dd9d.0","@material/mwc-line-ripple":"0.15.0-canary.fca3dd9d.0","@material/mwc-notched-outline":"0.15.0-canary.fca3dd9d.0","@material/shape":"=6.0.0-canary.8707953b6.0","@material/textfield":"=6.0.0-canary.8707953b6.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vBU4TmpgINbdKR/lYLGEpG9gizHBBEgSS6hr6ZwFo5peB+2cvjE1TEK1yOTQngn8c51MgDLdRZRTVw+5Kg+sAQ==","shasum":"196f5e47468499fae41b8f4cf64b16dc455bb2cb","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.fca3dd9d.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsLCRA9TVsSAnZWagAA8VgQAIV+vtqRX470MXkm2t/Y\ncj2ZPCHcI5/jP2w/NMAQl+0Wp4CSC66FYSAYk+neZaSmO9SMR/jHFH30iGOy\nMD9iAwi69KqJeEQ8Jj1gf0yUo7KCurEQf2+mWtimEW6zv4IxvlDsJslnqiYQ\nQEhbMIX7yNSTRuSw+yEj62NQJK1dFRE5reNeTEdJLZvjxFQM8dAp+Tyvtnmt\nhRLMNDNsApfd3VEa7VIz/fMLcMeafKJH5iI4qMBvfJesMJ+zZRQLKXulDQft\nJ7veFZ54IOM/FNrBk77qikiv6mlTdAXVxPM4AzevDkA6obkEo4ysUz1IoKmc\nGsdmL9x/zyA2GhqE2zSwU7Mj1f8ZH13j2Cxd82tdY22QKLmdxtCuouKqPLX5\nnbQaNRA+q7usT4jrzRkkaoOUo+kYc+uWyKo1XzvRlhAsKAobO+ea4Q6suq1+\nrSHkNWzYc6u9+KdswnaZid14bUXMD5g/EzqSx5i1Xy2KYwwYVFBXaw6KuAe4\nMuGyzZuMVdos0Ww0SffjQrJcDbDgWWMTPYsfeNlaaTxCeJCn+mL9iO6cyDmh\n3cQTyqvPFR3PjkRw/9NvJGEdVfhy5lpGexHgv6Ku9dwqvPXGxtv/CQieu60q\nZw0CLAwYwSAAsWjM5NeJ/IvlfKyLZ9RPydZfxfoJY8XEkVC1Qoa/Ue8t0JGt\nrp+8\r\n=31jO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4WXQcqZq7AIUrKGRqqHOs5o2D9oU6WunszGShANbDnAiAbgRGdPNyrXMZ6t5+HZCT1QD+LItIAp/4NeVJSEAXdBQ=="}]},"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-textfield_0.15.0-canary.fca3dd9d.0_1585093386704_0.9378693463206225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.10af6cf39.0","@material/line-ripple":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-floating-label":"0.15.0-canary.1e73da49.0","@material/mwc-icon":"0.15.0-canary.1e73da49.0","@material/mwc-line-ripple":"0.15.0-canary.1e73da49.0","@material/mwc-notched-outline":"0.15.0-canary.1e73da49.0","@material/shape":"=6.0.0-canary.10af6cf39.0","@material/textfield":"=6.0.0-canary.10af6cf39.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IjvrkGKTIJlDYk7sQkhxpzN215CM+ct2DfqNGCD/2NU5IDbJysIGifhS2qLU1co4gmw/gLdn2WjioG/T1sb6lQ==","shasum":"ae49fa705d9bc541574b7a77ef64ba879cdf63f2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.1e73da49.0.tgz","fileCount":20,"unpackedSize":254624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81TCRA9TVsSAnZWagAAoJcP+wZnojUxkynLIYmKkAur\ndSfA4EFaEYL6ydepoEBU7cOUXQ5IX3GdN3CadLQbTXq6Z0y0I6MXr5iESB0C\neMX1XNkx4KI82iOafp0TOKRJ+8o2HK9YhNldppLFwtKMnvtgPEQUl8UQjGX6\nxPZTZRpu9gKuVdqQf9xQN9Sz058dPNNGrWhJ2/mdQp+oMbzrEgQGWiJZbFKu\nT0TkDAT4MYcRLQJDwTgOKpR74l8sIwFd2Ch0uX8hsA53Z7F5a3f6ul89WtpN\nExOTjnUXpm6XHNIbBziBXWZX6ibNudQvKWgoj6cv6Kx5BuJZCvb2JAS59sbO\n79SP0nABJLjH4FurFduZ2vwVKnEdG+jtVxUX7IwjuesNsyMhvi1CL18OV+Ov\n0OenVQF/FaZwRZJ7gxig3JAKOnemdLE8CHwJfhAt6RgkrQaRhLBgxTraCIya\na8hxxQYwzHFCY0jIpPnb3z/0xUhk7UcvVLxUpuGHJ1GfExwMwqCTZK8Cl9r8\nlvmDkdv9iBRh2RtuarkgqumJ1bJBBI6fN0OFZgOGPvU9ivObffiJSyOrJzTP\nbyuRlr39rN1Y5n8GB3kRApbhsYRVMMuZtnZ2BkYF/ZhVae4GtC0X1//wgC/e\nV/lEvD+1wtM2k5S+0UVu2K2Wna4S+/iXc7n6fBCUKm1Dm4opfcxfWQ4wu8o+\nAZ6V\r\n=SKx9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgWOLOwcSxPKTWdqryyi3plx4QKY0vuccM+8iK6+VxMAiAljDpcOTIWHh/pdVU4kgqG97Ku5yQkFUZbbEOrFkoOwA=="}]},"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-textfield_0.15.0-canary.1e73da49.0_1585171794875_0.05792115264134434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.10af6cf39.0","@material/line-ripple":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-floating-label":"0.15.0-canary.bb6dfc5a.0","@material/mwc-icon":"0.15.0-canary.bb6dfc5a.0","@material/mwc-line-ripple":"0.15.0-canary.bb6dfc5a.0","@material/mwc-notched-outline":"0.15.0-canary.bb6dfc5a.0","@material/shape":"=6.0.0-canary.10af6cf39.0","@material/textfield":"=6.0.0-canary.10af6cf39.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UQ5awp/QC3cUFdBAybradOtpeFKDBeQkywdADhmeZ++mol6TZO0cK3kHqQlAgAeLgojIVY02DBrxojIspsQZnQ==","shasum":"14b15122ce652c54e7e22fd4a18ad92d9e2fc199","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":20,"unpackedSize":256046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVV1CRA9TVsSAnZWagAAS7wP/R4ANt04hX4+YYqKg/iM\nYgUhu86F0ek/kMejLcIESI4Ih461ZOi9XGUxf1mIm322XK8+jTeeu7UjL0sD\n8T+UR7zxolbGFjPySq92xL15WxX+KQ2x3yMQV3xhVzZxU3tRK5oibLNgFPVV\n+6sruAQEqoqWLJgHG7WIiAiIauDKh7tzh/ycbfAur7ZjSap+K5oV5TFSm0MY\nnCJY0dwW1uc0DvzKX/gU79titqyUjy0bIJPy/FaYqqse84U6RF8nPg6Ey0Cd\nGins5p+Q3pR7X/TMkAmNSyv9FczkuPdQnoj2Z1N+vihvgnb60zpYZZMxML+t\nSfDxp7bfrF/kWLkO+bjisoWLSUQichK1rn9ZgUOzYdWQZaOJNAWBbgxx7dMd\n28GNxpO8T+nHc5ZWG1e+8J9YWgZBWsIPrMlSMCOwxxuKrBxRxxAAl0FO2xYe\no77zgAFgCcd7+6UPhAxlwJBlNT01UiVxNtfMVeZiEXAmW9R5dbGdzNT7eWf7\nasPv5kWtKkePKJ53SIHOJxQgoGRT0W2A/V9ZflRdkF366sNRz1KXLtPOh2pA\n9yOKpt2Y/wWNRjBjZY+Qw0ARWY8unZHLmKT7ga29T9bWPDmndydpHqEzInH4\nfBo8tDFObv+ORW+qVugO7K4/R9DKeYOXPZ+d5o3XfvIT+akL0vuBfiLdEAgl\nWuTU\r\n=wTpW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEc8ONTu4xBN7KHlp4B1Z65Em3Lexy4y0ozMr/V4QF4WAiEA9YiN/1NjRMnHvC8ooLC8+CUulED6KMRvNhT11EU/Pr0="}]},"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-textfield_0.15.0-canary.bb6dfc5a.0_1585272180802_0.8004443316056109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.10af6cf39.0","@material/line-ripple":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-floating-label":"0.15.0-canary.1884603d.0","@material/mwc-icon":"0.15.0-canary.1884603d.0","@material/mwc-line-ripple":"0.15.0-canary.1884603d.0","@material/mwc-notched-outline":"0.15.0-canary.1884603d.0","@material/shape":"=6.0.0-canary.10af6cf39.0","@material/textfield":"=6.0.0-canary.10af6cf39.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dIwRQyJnw1WybVFOxFeRTGfQBAxGObR8kHwKe6YMOrNuUbTy4CII2EprJVXZN+d2h1R8WAAZEuXO/JXr8+96oQ==","shasum":"304929085afd1da91f18155c03d3cf8f1968eedf","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.1884603d.0.tgz","fileCount":20,"unpackedSize":256046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflorCRA9TVsSAnZWagAAS9sP/RBUusTJBMgrd/osVQ2H\n+wFOmvEKpbT9bng7ONDOQgvQ9OjHBSS/s1ALtLE9nbcgC7uV7ZdWFB4Z/1WP\nuifEwxE8xeEd00xS8q/1YutSuNauqUwwjc0sRIxqUkEYKOWHxnHcBb/VxNM+\nhONdx1m2UsoZ4gRA9eMm38zJ1mL88HIZSAqy0RXTWvGnVIuLCdoMp4MojA38\n/TmQHJvnopze9vlCTjJv0D9Cjfr73rb5YBCW2kiDomMsNCk2ulkCdhJNWzLb\nP4DWMk4iUxi5BlPkgYFJ/URSt4DCvsX7eL5rCmUtJvNwiNA+FeBsdiuw6bMR\nmvQFOPHTKzII/M2Vtb21b6MgMYyYw/DWH3nl8rBd5DIXtXhuWcwx8fdJdSQC\nPpNvphwC7HtOA8o3yWmEeVQ4H/NDPim5pg/hD8V+UQ5Fu84XNYQXcKRjWioc\nKdLt1VD02HPxLF5qPRUXN8s/yYoPYBrHw59jBhwucrmfMNsCSWvxJj3NnXVt\nJHHR7+S1Sda8q0kLRnSH8OmDpgyLIiIWdxHVa0T/5S6/AkFaIGmOGYuF8vJj\niW8BDzBBMOFKvrEiVhNpFpe+beZHZjbJ79Kbwx/qlx3vS6IYMl5mDFiHuyVX\nW+35rshmA8S0zvjo0U8hoM7hKY/OoOVdCPuSCtIIQGVAXQIT6/uEkhjfVeA5\nJqFL\r\n=UFnl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWrAFtU7fsFpF3l0yBH/WYTK2PWp2vyXjX41pUabhGiAIhAMnu7csASW9fBqDwsZ+p4unpO/t2+0xrz5Xb2/vaNA3j"}]},"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-textfield_0.15.0-canary.1884603d.0_1585338923371_0.028894477535077234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.d6315efe2.0","@material/line-ripple":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-floating-label":"0.15.0-canary.aff73cab.0","@material/mwc-icon":"0.15.0-canary.aff73cab.0","@material/mwc-line-ripple":"0.15.0-canary.aff73cab.0","@material/mwc-notched-outline":"0.15.0-canary.aff73cab.0","@material/shape":"=6.0.0-canary.d6315efe2.0","@material/textfield":"=6.0.0-canary.d6315efe2.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yXA8VI/bsqRGYIP2YTw0NoIX5LI2G4IZTdBFppZgLPY+6Z4uCJGQgfc299vw06re8EGZn1XSvi5kSEJe79yyUA==","shasum":"b610e19507209462ab64dbc43f57da49e60a6225","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.aff73cab.0.tgz","fileCount":20,"unpackedSize":256046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyrCRA9TVsSAnZWagAA4hUP/R6+rsv3bmvbouHIBByt\n02IW5Kmi+9VX8q/8CtExfLgfiOP6uiELcDoagFD3OoU1msy85EpOUgvjP4nw\nej5bPniVN3uwh2ug5y3viQSp93lTnl8c3ObQM7A3s/6cLYUOy9j8Uh2ov0dD\nAfXp51KNKNRIqQCLF16jPpS82BsH39+KZ1LRmRHeIjTSAdibvtVSFEQFXLoY\nP9rAEW0ZZM8t+j2LVvzwJqBhn5vQK+21HUUJTRkUA5HripAeRS+sVh3vWvCU\nf7dJv8GKnYC8Du4qbGHSSaJ572/6N965bGCjyc5KGW6q23jpbvkAfsnscDyI\nipBcydHxdgAblLpIx/y9so9TJ/Mbq19LSOMoT7Ub7IlPwLIm+ITyvyO9H3RN\nbkUOGKC3+YX3lDYfVCcJ03xy+7623amBhox2OYNWQsTP+1L6rAQ3onzgzlSi\nCn6qUhxz2Ft7wrGHSG4QIaVKJJv3uRPT82xIRC5O9PL2iwpxro8eNt2Dd69/\nVrZARhx4fwyK14zYzIxoHMNXDz9rQAVayESUqboHos8hvjYQsPO60jvMDuZK\no60gFtRlZdi2i6lUwLc8Dn07cyYKozC6bGiqGnvHx0DYLOhSg5K2KMTlcHy9\nDea70sjR9qqCsa1lpsuFy6St9oHbwDYKnpI4l4/ffQO5DV9STMUDMehvjuMa\nL5Zv\r\n=hmBK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUhrhoTUuQz5ehugaQp5deaOluNYrWO97UCd9iWlcZUAiAPe53kE/I39vaRFmc/3paF6nrD9P2jPOp7aQjfTCGOCQ=="}]},"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-textfield_0.15.0-canary.aff73cab.0_1585343658794_0.16716259853184146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.a3016368d.0","@material/line-ripple":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-floating-label":"0.15.0-canary.63168f61.0","@material/mwc-icon":"0.15.0-canary.63168f61.0","@material/mwc-line-ripple":"0.15.0-canary.63168f61.0","@material/mwc-notched-outline":"0.15.0-canary.63168f61.0","@material/shape":"=6.0.0-canary.a3016368d.0","@material/textfield":"=6.0.0-canary.a3016368d.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3kvBQPweB6HwRz+onslIuCeNVGYMPwEofR4CHZRRVcOKBszt3/pHmszr/DsGxQcB6F/RTzBgJ5sW3Iw4GeeYnw==","shasum":"f00a041d02cbeaf192a5a17f37693d9c5967053c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.63168f61.0.tgz","fileCount":20,"unpackedSize":256046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gLCRA9TVsSAnZWagAAdNAP/1a1tgGkZR6o/o4QPjA3\ngW9leerhnPgUymXPskjK3pcUlc4WnPA1iNgkWFvHUC3L4gHwt9Elj908sQ+G\nwBna3Y4LRjtt0691I7X4mpDA0zNv1RCT4xCsN5v4YYzPaIol6R88LsnuTtFH\nzj20nHe8oLSbHVt2Iu3LGmqenKfEXXjIpisB1wb8rw7272tCyOyvqH4iNmNw\nnP3hX7IJYU4Ep/0e7WdltrLHoCXzAlp/Rjw/FqyaqXZ64OKiay2SPASRQYa6\n7q5S1IirQR1S3RnIoHmmKjaNGVgzXX+2J8Kcoeb2Xc4CBBTdjOFQSZHXysGP\n4t8CXhFGfyBkz+NcQ9Hrlh+ARfNCYP5s9Lw2B8x/4CcNiVEyQog0VQHeHwBy\nUZbU3n6KCXmdHTrqDQIUVWEUSaLwPB5pHBeu2oNWOarW40AF6reFiRwqQ7eI\nsDXNuluJ2n0BttQJk2NG4moYV+2of1UORPaDeiH8KJisX44tOnzmspsoGodE\nzcckWiD8ubXG7Z8wI8NLVMY3wnaFKYSF6hxhfmNLATxdVJGND0B6Vfw8O1I5\n0dPUOo/pnNBFW8IzWHMGoyigfLDZeL9TVFz4KoBXWgV+sx3lsLtEYch+kGwq\nx+r5UPbAqkMUQDqjQSGGptXmboNjg7UrVZMnbABsALLD2rMD29dD/Rw9loB0\njRNm\r\n=kz51\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmuKNfhg8VSQ/neB0NDh1OOtC7nJqnGmpDJN4gAbDl+AiBPPJOcV/QD7olbVmayHwXVg3Rx1vQWdF8Xdg+oFtLKTw=="}]},"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-textfield_0.15.0-canary.63168f61.0_1585678346613_0.4908796963349582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.4b45b6620.0","@material/line-ripple":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-floating-label":"0.15.0-canary.9fb79b3e.0","@material/mwc-icon":"0.15.0-canary.9fb79b3e.0","@material/mwc-line-ripple":"0.15.0-canary.9fb79b3e.0","@material/mwc-notched-outline":"0.15.0-canary.9fb79b3e.0","@material/shape":"=6.0.0-canary.4b45b6620.0","@material/textfield":"=6.0.0-canary.4b45b6620.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NFClYJ/iE88snAvbF7yxLnt2cLzYA8exlmTeltrD/AwLqdjWAlj5ZcCgwF2+WSCIqtpDwGXCn6yUlZzV13sJ3A==","shasum":"105cb3c74515699d31b94bec04e15c6f4cf58ca2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.9fb79b3e.0.tgz","fileCount":20,"unpackedSize":256046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QMCRA9TVsSAnZWagAA2WYQAIlW3CAYjK9pBOi5c4/o\nIidUGnAFA5EV6WtPZNQahejLhLrSA2EltNVEGFixMftyqsmT45I9ukoYCw03\ni0oJFyDXObkVQicjWZq3HeaXfDv07abix9yjwV9Y6qj8V01BjKbNHH/cgb/x\nZ6cX5B55GgvZwRDw1yWJ9nTk02JpQ1O1n+/JHg39X0/hTOlwYWxlvUKO/lRf\nNaNRAagIMkEryewqo74ljxBq4a9eI/3PCoF/ocvgDn7p27Ph5qqFe34XDwd2\n0LOak6IJTf+9JXHgAdROUPwfLOg13pvOjI5OR3SS9mU00/YT9vW615FuFYYF\nV12jCYYf1ZyHiUF+odE/GeJHOPS/aWHzj1WGu9AT0FWaQQAchX6dy3S3HlxH\nNz+qPszXuAgGi5viTkYmsGgS1mGtpPAQsVxXW1c0nS5HbTG9X6UzK/cOuEvx\n6XbVCpdO2434/NPXmWQ2r9pWMtLmR8rY7gSGqjHn/eoxdksgRdNMiYNuLiZq\nLIcsnTUwE0+h24zWSCp+XSIH5mOgSK0qn8cK6m4oClS4frO1fIEW5NJB0ydt\nYguCMTkAnzuW10lm6JJh9yfJuybPjaWvbyh84At6Cy8jUO/6MfPed6g5LUZo\nUcDtT9bjZFvLmnCnyDyg3jch563BHIUzUOkwmVS2SYUoKkgujFSw6/YFCttl\n6DC7\r\n=ML8g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD90ineWliN52BF1rajbTYjitrIplL9d1eyn4OZ52wdyAIgWJKJincsZiwgc4b9nkS5a9w7gudIMAcnc5i9NNjo0y0="}]},"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-textfield_0.15.0-canary.9fb79b3e.0_1585689612319_0.2805756514530813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.4b45b6620.0","@material/line-ripple":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-floating-label":"0.15.0-canary.9bd3e9e2.0","@material/mwc-icon":"0.15.0-canary.9bd3e9e2.0","@material/mwc-line-ripple":"0.15.0-canary.9bd3e9e2.0","@material/mwc-notched-outline":"0.15.0-canary.9bd3e9e2.0","@material/shape":"=6.0.0-canary.4b45b6620.0","@material/textfield":"=6.0.0-canary.4b45b6620.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BLbgD3mTYxIHHw0aRKVLt9xgSPLS7qyqghPVwf1gLINKZ9gLDMbAkeq/OxRhlXWarGSOphOqVznNu4leAjGViA==","shasum":"6b3f95a8e02d3616c4c6432430e5ca25d42f76f5","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":20,"unpackedSize":256046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91RCRA9TVsSAnZWagAAgToP+gKUIShOKLVdOKwR1XLO\np5KLmCAtMZzx0r0C4tFLpDNYDjNO8rDr59zdMKA9MVLcE6CR/Cg1Mmj4Jm8J\n1svqJ5a1neJ73Jujm000Pf2co9FCPiYuzSyENk9LljxEGfr2IjdG/lMN4Mjr\nT7j+K2NGfCUKY7YQ4HAOyKEdmOIw2cKG7yDyAdbumyEmhSNbKNoRp6kSX+BO\nlQTVNvKy1tocWIfoaj8wlF4nax8hKOkrI4ZytlRIP5iIye1+8w+YPfGTKXST\nznLYIGyJh1PRtzJKC5u1769bVhm7UFcqNbSIzRRqGPNnbClx8uWXeBOYncFj\nNYWDlsF3SG/SARKSzVg2a7uuSmkQIOgsQwxH60n7dtu4VHrkFMy42q6EP/3h\nsP0lQdDRIKXvyqWSkUtjkuiZrZZHLD2gJyz/07vYjbSadNapnNuTRhpkDGCp\nVLksAVS1jzvzEGfMj46QRW5NhQKaRpJe4VuGgUErzXSvhuOvpcuq+4lhnFlI\nFCCvx1zPByqMAMnxaQAaRw+UACCr/ZzhQaz696NMYYz4a18sBA2D4uSDW+uZ\ntM/VSQBn7tVSdFjrPlnVQGoVfWL8hor0qmWa5zEl+YjN17qPLmQU+Xs6p1pG\nWyCUdSb2DNQo4mLzTpuXtT84qEwchrV0pEdE8AVRXUfE68x4Z+6mRcgeGysQ\n6n7N\r\n=f9JO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmEnuzaFv85WpYicn33QqQIxTTsEvxnSaXqOiqYYTS9wIgWH4dCktD4lV/zOVK9bwZ7X3cRxPJmNGVcL09Wrc1Ahk="}]},"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-textfield_0.15.0-canary.9bd3e9e2.0_1585700177236_0.5213916159067715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.e84b9c8.0","@material/line-ripple":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-floating-label":"0.15.0-canary.072084ab.0","@material/mwc-icon":"0.15.0-canary.072084ab.0","@material/mwc-line-ripple":"0.15.0-canary.072084ab.0","@material/mwc-notched-outline":"0.15.0-canary.072084ab.0","@material/shape":"=6.0.0-canary.e84b9c8.0","@material/textfield":"=6.0.0-canary.e84b9c8.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ncUBzIySzVwqXlHYPXk6eQOG3KO4X8KB9pXZXQ5Jst0LW+rXy+t3fHqr0m0omf4iMVsq5EJlmjg4Xm67AkStCA==","shasum":"783412378ff6dfabfb629ba7f13f0241aaacb182","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.072084ab.0.tgz","fileCount":20,"unpackedSize":256036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/wCRA9TVsSAnZWagAAvGkP/AnZ4meHtwi2DDH7l1Km\nerZ7MjraS10qjx1+PG9ftDBmjICuwuH3OvD2tznLUtgEy/izcISHOwzuxbTz\nP1fijyq6EUZi/ViZy4edNZn4g9w6tRPFPytWEEhMTkp9YlVFo44npxav9ppw\nYzFeX3TCGqVtuS73+SBrHmI8jKcC9fdZexsbFLqOcM4zS+N3AIZXNst6xBfB\nfC+1LOhmCQ1dxpaz/Xfef3tLjntdw8TW12ZFSAMAHTEIOpTRX9NOtP3iS8B7\n4DUrKaQ1Aruks9QxxnipgpGZDCXcQdvOHCC7JvllfNxUwOWoyAnBjUPRvB+p\n08HYnb55hYGRvv3PPBDBc2RuXJDqEWOy1d6YYGPfP07MAp3eZTnwZdv2oyBk\nKQm2T7Rk1NkwSeNsBKHTIbiCGGmVV69iKdo+jsUB9mQFgrDkJvnvicTHD+zP\nQSaBnHti6iS4fJKVmYJ1adKIMpQ/WygXBszOSC1pnoEGhLYA0CMdqSusngW2\ntVfBv2PXJqglhtCsK1DqMdu2x5qqPaOycMBhQldvqJbR+mzlRZ71v4WHS+rn\nHifbmM9oR85WLKHkO0SYwhO6sqDMukeMiAKc1B05LBVLN05+3SPNHc3oUv3U\nhmO1eljNn2ScuoXlCKdNuX+CDocrvmT/uQIJtZu9evNgSUY3G3aIW6uGAm54\nhGLy\r\n=5hQe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUHV7ISpExum+DzKHKixPgD7brFnspcXdx1hj6eW8NvwIhAPrxflGvt4WTX38nDoyEopZsaJkkwr+nV5k7b8pgF9jg"}]},"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-textfield_0.15.0-canary.072084ab.0_1585766384281_0.8466326981553598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.f1f8e60.0","@material/line-ripple":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-floating-label":"0.15.0-canary.4dec04af.0","@material/mwc-icon":"0.15.0-canary.4dec04af.0","@material/mwc-line-ripple":"0.15.0-canary.4dec04af.0","@material/mwc-notched-outline":"0.15.0-canary.4dec04af.0","@material/shape":"=6.0.0-canary.f1f8e60.0","@material/textfield":"=6.0.0-canary.f1f8e60.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WaPnn4xFFFGwAf9YaQ/BbQ/HTEf+flikmmH8vq1dRnWaBy0dSVV2fW+XZeWZE/xkHNL+84jSIjhYqwKb2QZ0vQ==","shasum":"a6c63f01a3bf9c84b2db9550c62e683b5c51f6ea","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.4dec04af.0.tgz","fileCount":20,"unpackedSize":254590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y0CRA9TVsSAnZWagAAfu4P+QE2elnHo/i8dzUq+jaT\n5nbr2Ix9sl8BcSxdUuXODjN11BD5yyS/vOpPLeLHSj/0RBbCICJifqy+twpW\n7Ja05J8CmbZYObL18+8RCLEiUEc7SZtFZFTq/zjfcMqoa1/AzURgMMMZUBV3\nMi5iGqyBc6R0NjScSkpzZFgwl5u6/FT8CbhMY9GcNBpLPEvf1krIeX360W7O\nEX0vCJsAYu94oCh+aBeIj8suZGfzETHHVUES5NLhvFvWis7bwtxZcrpEyoo0\nQIsWX5bNNW7bZjtmEI4Z4v0M/UyZZTSNP26LeTc9WTVv+S/XXpCvq4m5KSVr\nBYrRHwgKAtraxoXibJNajwSKRTyeehN64ssyQMSGvLc9AFaB/RSYU54jLVVo\n8orSiDq8DxPopGwDfoCxdw2qvAb3WYn+j00G8OO0ogktaV5M9AZhe0sPzllR\nz3w+6ecVKOI0991/Hz3wS0BPWjxNHn4B1ddwtfTcyDxX35SRMI0CGU1agmTA\nkaaRF6h6ExQKNnLT0i/pszfCUNiZNcZcCQsvsdPbnOqg0JrWeQiwvcsYGKnG\nbUt1+AlHutj3jenbeuOeoRHRA3zqHNDXh3G3I6PHx5D67wFwetsKnAnPVMNm\n0On02N1s+XHkQXCL5OhBF+eLvJKqVgQNR4AaImh5Vk0A7AcqFWUKqK40dakD\n4u5f\r\n=A5zR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJQbJmM1LUzxHMoEgm1rMUE2WOQlQFr84A4IvfyUlDTAiAfLBFK6b1vtKhm7ot+XTxSY50RJ7WfxEDPnK9X8CwVWA=="}]},"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-textfield_0.15.0-canary.4dec04af.0_1585945780121_0.6379765066678185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.e84b9c8.0","@material/line-ripple":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-floating-label":"0.15.0-canary.9b676354.0","@material/mwc-icon":"0.15.0-canary.9b676354.0","@material/mwc-line-ripple":"0.15.0-canary.9b676354.0","@material/mwc-notched-outline":"0.15.0-canary.9b676354.0","@material/shape":"=6.0.0-canary.e84b9c8.0","@material/textfield":"=6.0.0-canary.e84b9c8.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-W1A0gNeTWC2X8O2Wk/YJF1eisBG39XTDtLFdh7IaILpB6maqyTIjvFwNJBSKe35vh7WOpRbzp55sdr8zEY309g==","shasum":"4a31d5e060ce8b72a3aebfd3f7f0c679ca8a429f","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.9b676354.0.tgz","fileCount":20,"unpackedSize":256036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zHCRA9TVsSAnZWagAAj8IP/0YDfAOIMX1OFLp370+D\nbTGHtR9+MzeQFYgSxaimJcTGKeJEiMM8MntWEHljPTHCGkDa8+seA/CChf3G\n46m7nvi7jL3W7MQaxdfTy0PLrydxsjlRakwiaArH6nu5fw52wo/iO3PO0fDZ\nh7GR0apJlVZMQ8DN47en4qeo39clK+3F8cLi3eeRolhU0Mxug8Cd0gCtWNAm\nbBy7u5hQnYGw4yN0c9/pNyAsS/Yv+EqD0N1OSxNUHOpyiPB10cywSYMI4aFC\n+N51iZjc/TJtd1iM+E0XuztetHSqA8VEAnCEOFc3i/5M06f06MgFJSK1l2UG\ndjEwJyxkPoY2Q7yEcYD+t4ekqJKhZ5Hhe8O8DmO8rTE/S6YH6YZjcpt0I43+\n/wcmHNGllZuIteHY2RlwWTuuMJeSMEEDgnV6PSwjLboFhiBTBbd/2GOmS9C6\nnnxE03t5B7GrSKVzpUhMh7ctLPiylbyDaGyahuTc0kIeNevGDOvv/SQCDQJL\nDS21Ok0MPxfmhiTKqcHhZU27YFONfLjKVTzsC0O2d4HRi+umP1W3Pt0Bj7MS\nbL3MyxyxH6ZsyBQy9WiPhFV5e+LvV+7x8YJYS1BpHySrrj/pv9LHwKNYF2A8\nQYX9GuHcrOcrKD4gs994TvAWgec1cmHDHz6XGcd1lBHwlnUMeJwW3ACMQ5b2\n/RkS\r\n=1qwK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhCa3Urmg56XCoKZOEWE8Gif6ty8+kapocoK8RtFi2EAiEAljRKJdAVEFy4igEhc7/ZoInJANVtakNMlQTd37/atzE="}]},"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-textfield_0.15.0-canary.9b676354.0_1585945798474_0.8253905211097123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.f1f8e60.0","@material/line-ripple":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-floating-label":"0.15.0-canary.6b946095.0","@material/mwc-icon":"0.15.0-canary.6b946095.0","@material/mwc-line-ripple":"0.15.0-canary.6b946095.0","@material/mwc-notched-outline":"0.15.0-canary.6b946095.0","@material/shape":"=6.0.0-canary.f1f8e60.0","@material/textfield":"=6.0.0-canary.f1f8e60.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ggWRTLw6lAte0poDRalkLuOv5dulLME6zyaqugaZA31vi8aVSi3NbuTlgA5zGwynvLaV26oJeWi/qJctJjKFuA==","shasum":"9979711cc4d9fcaabcf5303428ed253e52659292","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.6b946095.0.tgz","fileCount":20,"unpackedSize":254590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mFCRA9TVsSAnZWagAACusP/0JGH2WkbQHmfBDpq4lF\nI2GkD51pa2upY8KH/QaPPb9ilr4IISvMbe+hkhLgnJlJyXPB++3EBbsZb0u6\nB3GYeJ+upux/mHlDXeRGJaHXrbCaD5dBbjJDNy5ZToXIE84bHnaJ/uaLxcYV\n2Ov0atarueZANl+k0HTliXlD2ZxzdO+1n9B7oMPXi6qVYSjyymH/GkZgvIt7\nc8UBsg2sXq8/HKZ3NJqGZDc4qF7NTvZVZ5OiQLgqW4VTIaktVeSIrtdZn0b3\nvEV+YB2KQWJSJW4m1eD9f4UDJ5MqFNXUl/jQdip6562DvN804VdqxEtQByio\nW0RPXYjlBMUBMgGHVr1+HuKRGDIwItEorK16Vw2OsatsUM5OD4gsfTAwDsJN\nVXAsd9vO13wM8KuFcQQa6d/uasF9jqXADAeswHYk9N7UkSJhSy/g2EW7amAc\nQKDKk5Hv+nL4sliqvkiC2AqdipwIN3tmL/31DXD7j99frop1M2P6+Ee0zoK+\nlbdmW8rPtWiuCTIUAlUF74XeqNn0+p2GtXkpAZdUMdu/G8F97FZ8NYVdbh7d\n6axT0OFy27Zo3hx0jlpwtmliYZx/W+SGlgeemlzaBbE8oUFC5p4CSnAFn7Yx\nazxb8wq/IwVCvGD8euR3iu2CGUEVHGAebCWrAA6o+e7qadXoG9PGsFyT7iXp\nhDvN\r\n=2NeP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn9NFiya/cbF1QJxEdF9KiR0Z0ozwal6/O2u5djEyMeAIgXwNSCegU+5q/vdtFrSLve22R1lL90etDT1sGfP/H8N4="}]},"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-textfield_0.15.0-canary.6b946095.0_1585949061064_0.6897647660153134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-floating-label":"0.15.0-canary.5ccbfaa2.0","@material/mwc-icon":"0.15.0-canary.5ccbfaa2.0","@material/mwc-line-ripple":"0.15.0-canary.5ccbfaa2.0","@material/mwc-notched-outline":"0.15.0-canary.5ccbfaa2.0","@material/shape":"=6.0.0-canary.6a40ef217.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ynWrH/x00d73I+UIxRF2VxEK0CigmYBtaH9lO1jMwidaiji1N1StrvRpKGDlArY1GpwgpugD2DfBdWnE38R15A==","shasum":"8f1b6be45d5b0ca136517bb186a142e213a29099","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":20,"unpackedSize":254600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rRCRA9TVsSAnZWagAAReoP/3cFdg/U/k4SUr5n6H7u\nfZrVAEZTqkVsFvCa1VwIIlPJEFiUO0OY93h/nV1Xvxc6o3KNU5F1rXHwsl68\nZaV2nDzyKGOJLb/iGW/hdbI30cuuu/J2KWOTkT/b/8dqSW6hUVeN5jgOa6yk\npclnLo+q8ztKBMTlhDA04ldlEvQDG+hLJjLrqTwwNMoUZb1vW8y7I4bYqUsM\ni/YTSSSQvk0Qu4tjeQnghwN37vb+V3S1yGU9PO85JOX2kV06cfvxeLPL5VtX\n6wnbFaqFSdVoaqw/ClB6mT1odd/7Dxn9OZhbmtyBeTeXQRm8nHnToTS6IN9c\nWmPzX1sNpDemxSzMQ+d6LUeJVgddfMZZAd/7RNrJ4lpmOwoEVVlWVmCyG02H\nobBrz9NAuhYxwy7Y2YuTlPaiimij4BH/JVJ+Ab38tOc74/vTgdU+UqtViB+C\nFwUSXWJmZUubif/y9hgz6CoTx24vAGoxVkh3FjhTqtonSf5ax9jKAoJNwHjn\nKS1J3jNufXzjCaBHxsXo1FkdsRJzc6Z51BpapBUPYKj0ew+0pVVCtSf6cedd\n2JvH/eTHpNW0RkFv4bEdOrUOrel8Oq1gtdR/mQwUM0bMhrEHeG8FvljRZ6WM\n7wReXurjZFVP7cXhW182Mg2mSPNSQY69Kt+iofeONmNe2/LbJ73J3s8yCxvP\nSmCs\r\n=ZxLP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFefEc92jpOTRudTpfR/aPaMpT/OL0U5gGDbb7uluzPMAiAuVB4hQxcUsB2N2xy7oobAzgKKz7zEF2zwW4QA5OXjXA=="}]},"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-textfield_0.15.0-canary.5ccbfaa2.0_1585949393266_0.032122801768318165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-floating-label":"0.15.0-canary.a0ab8772.0","@material/mwc-icon":"0.15.0-canary.a0ab8772.0","@material/mwc-line-ripple":"0.15.0-canary.a0ab8772.0","@material/mwc-notched-outline":"0.15.0-canary.a0ab8772.0","@material/shape":"=6.0.0-canary.6a40ef217.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0fhPGjrj9QkUvRxWHJ37uxyYmvy0sAfArquaX5DBJ/Sg1TzlVlWGrsisVzWE2UtsMfWlqlejhG1PEiQ6cu3RDw==","shasum":"40b9b10270d88ec605b0cf92b6a033b3bf7e7c1a","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.a0ab8772.0.tgz","fileCount":20,"unpackedSize":254600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3fCRA9TVsSAnZWagAABHQP/ibxdd+ap1xLp8GuVuKR\nrWFpycXnrKsC7iuzbHeVJ53cS8UqC+Hj6QLfOACVYkxwMkfXSSG9EPJeQXwt\nffpaGrUMrLOD6ih4LTuDz8w3c8VPpatwe6RbJRyzfs8XZozb7pTcQFgYemmn\nO6R2uNEwAzOG3p/aN46joUfVxvlauQxXDc/Nu8USP9h2XmO1avKA4FK2XjOs\nZIsTfIQT+r7EwTVG6Cx5rX1Om72VWrAwkwHdrGT9yO/zlX3KkSxX3+4a8lWx\n1Qlv3oAJ4BsZAvJQRZqq1w+dMZwYGZl2pi03l4dnPOTrHruXhFZCzLey6fdA\nhk5XICwIdnhgEDeCnM+4yphDNoPZsgJgDq4CEolefTUHWHdTbXll4jaA1XAc\nTr8r1yq71iXt8uxz/OuvyiDMLZVmvbJb7MHwuWBM42l1K0SxkNQRfTs7UaSY\nknui0dqj+rZuNs42+Z2CTbJLUVrVal4BFgwunGPmE60qxPyo9a095Tvw8Kc2\nQXhW2VYFkp9qIXzH29iYsLNNCNgIyZ5rsAgCMLNYmOkxhVdsAP4GO/aJ87MH\nuyqgP4mjjjS87MkY/pHryv412j2z/+qWpVvts7abS/1/vPLA5Gr18mF3xpwF\nMB8fHBAvpPoadQ0j+D3/OQM6rjV0Qb0CSyrDiafDETJ/CC9nPFCeK6c07Mw0\npkIr\r\n=AbXz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfdQgxjauHndoOcgtyldrwCKjye//9BDQWeYPk1VgSlAiBXMXaNP4hdLhhxnTV/U38dEIhOgcl+wVBL5GEejOLvQg=="}]},"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-textfield_0.15.0-canary.a0ab8772.0_1586290143215_0.0834685204775869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-floating-label":"0.15.0-canary.8d352305.0","@material/mwc-icon":"0.15.0-canary.8d352305.0","@material/mwc-line-ripple":"0.15.0-canary.8d352305.0","@material/mwc-notched-outline":"0.15.0-canary.8d352305.0","@material/shape":"=6.0.0-canary.6a40ef217.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5Z5dPJmfmks3XZn6oji4t7OUzv1VzLsrKOQ/hxAjUatDjoB6SEIRM2tUmpIix0MlsJZvKNRqLvXriz92YnrUKQ==","shasum":"f5225ae76cad3814bc2ba3165d4755fe2b30f36e","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.8d352305.0.tgz","fileCount":20,"unpackedSize":254600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOmCRA9TVsSAnZWagAAHU8P/0pp6Bx1IMXmKjyhrMQq\nnGr/NW1kjL5qRZf7x4ng6RCarsPiOBwOL4oraAwEHitr6+7NAODGRv+17srh\nhJVTefI9NcFmEialik1IH5qs8+zjweAq6IFTS5fnuQa7bTpxvc7UKQEQXijg\nW8U8JQn4CVrFE6gaoY9JIY+Q4Ma6q+8iU4MpACmgrGKB8C0Byrcjh0wns/DE\nUwa+4nlMgklavdSQMPfVdq3ji+z8CqS2VBYrF1qUG+jcarnWycf9SVcqXdOD\n5ZS4ezwGcg2aUwtBtlUCgdH9fRnViDiL58bz2u5B/gIaqKBUIksfU40OHQrI\n0SqtYIqkvQize4UeqjKEt3X2dfbm9rIWze1uSMjw8mdRUDCGBYeZ5A0WmvIW\ntn6H22DG1qmpUGxm1RqPI55bdqoQKOYEbw0wPk+U9+TECfn1utrtRrDBpjFC\nhg3nO45rKXg8O65Q8RM7PstAgau70hZ7jZ2tRWYcBxWKJLZJrP6jVBHzgzrs\ngPTmdMCKNgxGHMqWN/JHHzFbizpFMOwDOZes/4ZPYYTEzYrRLkSRM0IoLF8e\nlO/beRAp5RkwXZZyOZNWXaK+YeaNcupKVfT0+HLpVu9x0fF/Ro9wrWo9pZmx\nAIs3K2wQfum0UDaBPP9AWmVCPmJZDuG+PxiIHiXkyG50gT5aV0FB2b3joX/L\n5u/4\r\n=Zo/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZ0/zw7TqexUNe1ouydnDosVS6ED98zMYKzvoAoEM+AAiBLCwBhf8CWm9rl7HprfoxZW0CPLGjC3lvjL6mtcq1Rcg=="}]},"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-textfield_0.15.0-canary.8d352305.0_1586295717605_0.14059327518099796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-floating-label":"0.15.0-canary.31eac79f.0","@material/mwc-icon":"0.15.0-canary.31eac79f.0","@material/mwc-line-ripple":"0.15.0-canary.31eac79f.0","@material/mwc-notched-outline":"0.15.0-canary.31eac79f.0","@material/shape":"=6.0.0-canary.6a40ef217.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yjkt4qsS769o2tszvYAzhgahT5SB/Jkk4B7+p3C46hdPlDJ8/4bDeKFW8e0Wyk2daEKwT9yZJyN2S06+4c7sHw==","shasum":"cfadb9c452ef4a76dddd5468771c95bfcf6c5c3c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.31eac79f.0.tgz","fileCount":20,"unpackedSize":254600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdFCRA9TVsSAnZWagAA2RgP/AokEjmsFGm5hZhEyJd4\nryLZ6qKXbPd+hR0Ut1sdGDafmS5VA02A8qPWgJTRWIzyFJLk7CtsJJiS+uzz\nt9Cg9/eVOcFH7/Fjxjk33e1HNUcy4O91j37b7HkrCVlHFiotW+WESC8EHQCA\nJsiYqjUTUL/lEwiUZWRZHli4nmOtvYxvBJtElUntTTMCdltK4PZhAl1t0Npt\nLH8Fo6qmH656b3LMDs2tQhOOkVw+a5KapQ4gnq+xsZXPEZ5z3SLTiJ/GBf+F\nS36ee+obFr8GSGtnXSWOehsYWSeRLuTprrqDhFJNw1cM3JiU8JJslIt90HIq\nc8BwFSr/bjzu06GxdD0sTomUHcSeQF4GpltUob68Htx3H/9nzToQbjJJ19Ie\nWxAX9vkYchgB1v7W7kEVgnhbSmM/zCNpa9QR4+YfVds5EPDw0gpNQcHMokf3\neECKbKKYGot4YZkHm2h/fvckwFnqZv6/bAEyh8a4agZoPNGEwbprAC/XcaiT\n102/0dedVk84j0EVGZbnosrG+bpD6KzgCrQ6wn0YzVIwHAaveHlC202smM/v\nm44dO4serpJhDKJ3XZRx5HDTvmzpAqPyMQwVS2R++/0QC/UDJNuS/tMz+Lkw\nT2EAIXKszkMr3QzHb/MYFjp20sbAf/RAhLpvdcoFXTgLb9T+QKKL+ZBRqpOT\ndFQf\r\n=lw5A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcIQkvF4uAdPV4dtyKUL2O/qepFynVyUn0SErkjL7k3gIgMeCRD++t8RFt2FJDcVkAzhMfROozuRg3531QmiVS6rQ="}]},"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-textfield_0.15.0-canary.31eac79f.0_1586296644853_0.9587803143011844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.6a40ef217.0","@material/line-ripple":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-floating-label":"0.15.0-canary.ba05565e.0","@material/mwc-icon":"0.15.0-canary.ba05565e.0","@material/mwc-line-ripple":"0.15.0-canary.ba05565e.0","@material/mwc-notched-outline":"0.15.0-canary.ba05565e.0","@material/shape":"=6.0.0-canary.6a40ef217.0","@material/textfield":"=6.0.0-canary.6a40ef217.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Ywb2hF9GCjkhd9VVhjdr7QY/qRLEWhipMPRRT38DyhFXFZWJwsFdFQP5EyWFqVYiMubnQlwz4DgvVI0BrD0EkQ==","shasum":"33dcdfb7d482d080c26de3e658a165a1816d980c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.ba05565e.0.tgz","fileCount":20,"unpackedSize":254600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqtCRA9TVsSAnZWagAAnecP/3h4yWcl1h3/C9RLArL0\nM1C5pUXF6qhC7/t/z1AmE4QyLeGJk0ErpNihc1Ac0q6UxOcxeblIJiu42i2R\nlnHWGmj8+A2iSRv97b2uqD6abaUfSB8lWj4yGh+T8KSCi0bpR+ayLjKBO1hM\nJf0ci6IwPV1GbT8lLNjpu/fcFUegpnzLNGVKeDiRgLvjWCxUHMPT5YqdiBFA\n5QgcVCkg0fcdEfnY7+gRDIdvJPGZ4buc6iYVsDRpTZne5rzXh4nUm1fGq6SU\nmxuhuGwaEwU4hqg28nPQEvZ1VlKG87yQwkvHrknIFkA26LHZrMkk4wNkBLur\nE4zOY3bhI3UF5N9IsTupA9JSAlx6r/qcsOjVBvVMg8JQRsD1MZm0hPIGfOMR\nSLq3Yw2NIItR8Q9/atSFG2xJXZu27peEj63UF6OW2T701sEyKiSOFV3peVYl\nvTVrtcgEa9agHQx5c4OLXU67uGhxqoo8wkWE61bLVNRdKJ8MgNc56GWQTOPp\npzbW4yIsdWTGj6NmMCH8PdxhlJw4p0wKHHXAWSCP63wXm2QbR3n232vlwk0e\nuWyn691XPfiUHT9Wp+fPE7P9iwTjJMNUn+Kgq5+K4RPf8p4MB5GfFMmUMIGi\nCCYPeCfYzQp1WA1ULmwTXJhwYrBkiM5Y1KEjgrAOldgVWcFGdkb6fOxNKRBj\nVzXg\r\n=xw52\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcuzEgsRDVJKso9D7PvqTTgJSWzn6Ize8zVexUqNZuyAiEAqBa2UkElH6iLO1Oci1Lg3+ENh44BOcWbXcG4jglq0uM="}]},"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-textfield_0.15.0-canary.ba05565e.0_1586367148987_0.013553634481521026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.9930d9cc5.0","@material/line-ripple":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-floating-label":"0.15.0-canary.25099f79.0","@material/mwc-icon":"0.15.0-canary.25099f79.0","@material/mwc-line-ripple":"0.15.0-canary.25099f79.0","@material/mwc-notched-outline":"0.15.0-canary.25099f79.0","@material/shape":"=6.0.0-canary.9930d9cc5.0","@material/textfield":"=6.0.0-canary.9930d9cc5.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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| `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: requries `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 to accept input.\n| `validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n| `step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n| `autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ocDZFHeLCJPJ4UipattWxwrlc2IfmHO0btQgqiOrByRZXBPM4EC8dq+hFbPcs+ycSl3j8Dv4aA5aHEgX+3gnkw==","shasum":"e84fbf3ad3db41f124d355b8f964ea7d130988ee","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.25099f79.0.tgz","fileCount":20,"unpackedSize":254600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKACRA9TVsSAnZWagAAzpwQAJOV5O6PU2xVcQzavZ20\nJxVL/HbiT38Ku0pcGXzo4Iyg+dBiz2kxb9huxibEcMoM2JdZKI7Ira7JNYAn\nK1zhwNCCVVq30XSb4dh8biYosJWhdDLYQvU0cxNOB1jVP8SdM+oaHbxHMnWy\n30mv0DK991NBKoFCiopUJOm6ZObXfr48nmsidA3cw2zlF2HuuSQM1V123lHM\nsde18dPHpl+qr/n0NJGo2d9so2jfpBe2Qn2IK7h96gFKlULq4RIWYYcWc0il\ngzQi5fwysrTFNV9kdbOyrcZuJru7FOlHkDCqjkk45T9NS9L4L+biXhZvNlpm\nqqlsBznaw53YEu5aCIYHyCwCTcIMPyZJD9tqfbWDZ0EkrSqmpHvsVayK92o7\nRdR9eJjb9GruigmNVGfdmkmLj5o0rWI87Q7PKlEcb7U67x9Zlpv7sURVPiUf\nmn2ElfcaRJUH91JyYm/fcgmPpO29zV+ifjxrqAcpbmD6p/V8F+tUguzuDZ9w\nC0ylMWtrxMAZCpunl10R4o/MN8s0YRHIRbLLR/vVBfrQiF3zBwEbUWP28CDW\nHjWdkzbUKYfG0ydsRdYcukK7wNUH9QtwaFd6wwYFaPtAfW64+fsEUdCASFlj\nZN0JkqIg4jyrHGyEWnprOUkdEBKpSaelV2XMiKUG9eTThvKsTuE7AqjHiz/U\nrVVg\r\n=rPf7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuqXbBBbCqZa5+dfmtBv9x1A8gq5CJZu5EtbSn0VDD1AiEAj9oezfx9W6ufMhYqENrRbYEmagSZHrViIsU+UhjZZMM="}]},"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-textfield_0.15.0-canary.25099f79.0_1586381440068_0.10043922810151229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.9930d9cc5.0","@material/line-ripple":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-floating-label":"0.15.0-canary.447e31c6.0","@material/mwc-icon":"0.15.0-canary.447e31c6.0","@material/mwc-line-ripple":"0.15.0-canary.447e31c6.0","@material/mwc-notched-outline":"0.15.0-canary.447e31c6.0","@material/shape":"=6.0.0-canary.9930d9cc5.0","@material/textfield":"=6.0.0-canary.9930d9cc5.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-OE6P5PmHojpCKNIgkIsrYz+GWqLTAWOPoA9yxt9Xm8B1eO/KAyAW8J8uT2ACU2QTAOF3yXaVUgynqNMxVOT2uQ==","shasum":"be4c87515e73ea3bcbabb1e6275d5c7016a6f48b","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.447e31c6.0.tgz","fileCount":20,"unpackedSize":257571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndtCRA9TVsSAnZWagAAU88P/iT7sWCgFHT8Nyopzy2r\ngVZPpoOVS3/WzgTpsOyg55pPyTnTpDvTfKfAlXk1/GQxTCoxzkpsbwqmr/vj\nb87OF1z3QD/L137S2tQwDRmOR3zB26zy7iiI6W+tKd1l9Uet2suzWB0PSdnz\n7ptubV3CCdYhfcZoB6LusLZ3DhhHm3my89jGfTuDoLt77OcFGeuq7ze4mRRP\nGCK7uaknzCM7ZHaUSrFqWDw4bUv8PnVvgjUIWuDveYA2DJEXDYXFK7z6sW9Q\n/UADEdaxyO1/dgWDOEc4orzMWgP3gwoXqKJyAXnuCw+539mHxyZtadI+x/RR\no+B5DYZkzuWHUQp7aqXcdm8hQAXT4MemuYGhI7UE6/tVE54BKOlw9eKcdFR/\nwsbhjHtsvva0RWnybxf2BI/8xvjwpRaiUrLkrPlgEoMCGyxKlUYHeWcCYo+Q\n1vl3Kr66jrawg7S9rYk5jWN+vMr6a5xPOwLwaOnHRBaMEx5EXmH7cpbHthId\n5wpXEFIrNJA1Jwkrvlk/yNnsf2+zHzIpFCgpmb3yz+VEzNxUJ3ZSDt3145SL\nDuDOgWpIRcDQ9Jf265bZCphe54wo14Svy5t0Ozosn/deHnX4gyoTDqXRKgk/\nE6Ik/wigGUUXrSAdECT8rBlM0bIqA2tCZBipnZIsWFf0Pur3JRT4vjw235Ql\nxn85\r\n=+7aQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnZHIQAmAynlSsQnWIttChA1X5e49eP2T9/XtXGdhWxgIgMtC8cF3IURQMhOC71u2wdbuP+1+P5Duu+WSXUdt8E6U="}]},"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-textfield_0.15.0-canary.447e31c6.0_1586394989391_0.4555932305214865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.05f5e1583.0","@material/line-ripple":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-floating-label":"0.15.0-canary.d6dd84f7.0","@material/mwc-icon":"0.15.0-canary.d6dd84f7.0","@material/mwc-line-ripple":"0.15.0-canary.d6dd84f7.0","@material/mwc-notched-outline":"0.15.0-canary.d6dd84f7.0","@material/shape":"=6.0.0-canary.05f5e1583.0","@material/textfield":"=6.0.0-canary.05f5e1583.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-MJd3WS4EUl6bXkJH2hdhm6v1ICH9ts4avkybbSmITl0XJMpNOSk6AG3ZEeCGy9FsZ5GjQo6RRuEjaPEzXD0nqQ==","shasum":"5998a0e5564852e2c1d6b76ec2962a9063d1f207","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.d6dd84f7.0.tgz","fileCount":20,"unpackedSize":264672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlyCRA9TVsSAnZWagAABpMP/3sB4GwHqjqIDcdMFqGb\n4FgAao0ulpzkotVPanbdUk0sGmBsrzHElmHoMBszuaT/xGCFTqmWGLGgpOWZ\nxQ2zWPkUnuPgBFi0SyzsHj3Ua0lPbjGP8zyeo/jrl5rm0938afWjo1CETeVb\nxgQl4+EcYxPQij0dqTj7lWhcH0iIWZriBKxKvyGtMHdUxTUA1HzvOH0pMTzy\nEb/dGeGXD8n4FXrSsipzL9qeahawyuKVwW7dM0SmngulfGjhS38sIAfy0iic\ny8cygr5M9PN2Tb0Aca/uzoxGfIuLM+9Hhs1NcxvDV+urVje+H8sLHWFKMeSG\nUvQyMCypTxR4jF2mcVdmstCLPPuL+Vww0v0ec4yISmjv+b4wzxV4hXWH2T2D\n790/V1SrpWfP9WKxCM4b4ADCApw1YvG/Bn9wIezijcjHpZk0uop1jEBiehl2\nP9Jp74nN5iuAnGudopV/7rUhTqfYONJhxzVNyXIsKZPZtlWEi+xktDK5KOc+\nJfcnhI0iYg/lrqLGBNdUZE3hnLjkP25PzDg9o/+znlOqmaZiWK73ZgL/Yorx\n0N3EkjIFFOus43hVaCz8WYzL5sycPCrgn+UaS7ZLFBAEpYXlj/v5Pon4uUwE\nrWFD6dy4RlEV27GCqqWLonwi6kjhuW8z1a3c/dM+sOXK9npvUJYDSgMgxePh\nU+C6\r\n=gRIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICq/3Y88WQBKQ+zpWNWQ7gOY9biNc0rDy7Vusci0d/qFAiEAh27eDPUV1TupELkiFdMbg1zKMlsy2DrF03oL/8Epms4="}]},"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-textfield_0.15.0-canary.d6dd84f7.0_1586395506534_0.9775041798712929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.05f5e1583.0","@material/line-ripple":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-floating-label":"0.15.0-canary.9b03ee68.0","@material/mwc-icon":"0.15.0-canary.9b03ee68.0","@material/mwc-line-ripple":"0.15.0-canary.9b03ee68.0","@material/mwc-notched-outline":"0.15.0-canary.9b03ee68.0","@material/shape":"=6.0.0-canary.05f5e1583.0","@material/textfield":"=6.0.0-canary.05f5e1583.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-a/LQxw4Fgd0/tOoIyGzKH00p0DEdYTgAnmHNOmqw7ULuqMzW7pAUuEOGgoymIjvZNQivBx6ZCct6T8a442FUag==","shasum":"8f4341e95a4f30042332a2497b9bce9d90e3bb34","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.9b03ee68.0.tgz","fileCount":20,"unpackedSize":264672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39qCRA9TVsSAnZWagAAHoAP/jsloLvIvxmztyLtA5I9\nT9nGYuV3Mnh9bt4w5Db85XXQxyODgJHG0FQ5NZFjYXVBRU/fCRv3ougjXmx5\n5ZbdG1UQbKeE99B9jFSYcslV+YLtvXYtTiFPte5WfvHaFFj04wlVAgJcpbje\nDBBh1EcTuTHM4I1Fdxp79csvXyGVOvjv8CABqZ3z5FHUBXo7mr7Q43Eklt6F\nLtlBVtTFw3d7uNi3Dwf/vuN6Dl6XaaLGm3/cJY5j8ONKj47TbBl6Kzen2M6C\n9/1wO+Hb9HRc1u5aA99y2cf4DA3GXd1W9SE13E/1G17ViBq8A6a8I7cqifzK\nOQUlohJxSrU3J1ll5TZQHF3yGcIMUmPAkfFDH05wk2Zonoh3X5lJh/XoUk9s\n51eDpepR1QQniyfIYbQsrVPpIAK06dbHEzp2aPGKW7WeqoMe4juU/WAIEQ+1\noC38ueeXuP9ArpCMZ8UPPxQvpB87aD3yUE63p7EiiE76U095JAx24xdmcRXg\neef2s3YqIFL6U1tAFfml8xFrRI0xN7kzfhnFnxtRRRuKPV0XrgoLs6T+JiFP\nrQmuTre/qgdMT7JB6GHZ/0RPgkdiaxngbTjnwmXxeP4KPzpHlTfIqompgntd\nOzo+m8VZ1AldmoptA8bavusu8/T7+mIodBzJ57NglYYJIPNbdYzA/tfMPKJW\nqX+D\r\n=uUMe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvsgwliXbmFX8OJSr5tddPedQmGlyqJZ9FT8TjzueBJAiEA7QPQ9jGMDnd7yKkCd5AeQnnTj/It6u8MY6SPMflfVnI="}]},"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-textfield_0.15.0-canary.9b03ee68.0_1586462569666_0.5880692329329067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.05f5e1583.0","@material/line-ripple":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-floating-label":"0.15.0-canary.bbc25b10.0","@material/mwc-icon":"0.15.0-canary.bbc25b10.0","@material/mwc-line-ripple":"0.15.0-canary.bbc25b10.0","@material/mwc-notched-outline":"0.15.0-canary.bbc25b10.0","@material/shape":"=6.0.0-canary.05f5e1583.0","@material/textfield":"=6.0.0-canary.05f5e1583.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-we2nrF/dkjGSh1yen74L2I/gfbSIl8EAYDEHd+/Pe96oEabGHHlzOhS6SBH7+kYp1x1CsfyloKN3UH7IKJDFdw==","shasum":"f4fe720632fdb441cae132ec159b16ce440f6054","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.bbc25b10.0.tgz","fileCount":20,"unpackedSize":264672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcMCRA9TVsSAnZWagAA7PIP/R0Pr3G0IHeFJziwra49\n6L0K5jQKWzPgAMegoIadu/9jlabHfM3t9Zp0xOwuooL9QTkWG3ggnzekbnfb\nCKXeK17R5bwAPSnvMeX8jhT4aIRjTvA0YRckJX5E50Soijv/gV5YzJ4V+0dB\nhkja32zTdePISb7U+iEbb//CsBATwtimDoe4zbPMk7W+ZcJmPIAlqf+RlXEL\nTIVU+SHRwSZ00L1idRIPECzB1vpPz6Kr51ihxwNBQGcLl56uUgR7XQT1EutD\nmPgd2XZzqrCQWsS8ztsTDz7TrrVmJtrlUP6LFX1OV2RiYeV+6M0y4DQAj1sJ\nosnPbwcEhJvtrJJDqUU8YmZ5eEMiCONNal/he0HcvZlxWu1pu/30IpjmlXGS\nl5Ss6d+HwEdZG1PdFAgpTINJk6Jxk1V3ZinQWaK3yDMh1skcFybCtRTTf7er\ngWoHDI3iKU/6gkR4HgYtIRfg1DD4x6nc+QrGzTLx7ZPFlTNCAAwW3LYkSR8E\nZmhGAMuz3FYCZe0WVaF0IqFkTtZLyP3iH+LsZL7DAB0ijSXns5NKo/X3FUjM\nxzwPMfXiTy9DPCwJwK5vHkuz1/AE66Kc6m7d/NC3k3Pg20DuZu9WBJZmkl2V\npYRHB1MXfOxWARYPB6GMvpfv99CF0qlDHfOsjZOrcbMV2VWRXjipe4i+BElz\nt30V\r\n=7ogT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6cMR+OKGwwa/2gyTllTBi2PWoVUk5fuAEcB+5eRXxbAIgfp4XepkSTOgsWT+EKVMIAgz4qi9j7f0XHnZrxHoGHKk="}]},"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-textfield_0.15.0-canary.bbc25b10.0_1586558732031_0.751479623763901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.f172b0f90.0","@material/line-ripple":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-floating-label":"0.15.0-canary.339cbfd4.0","@material/mwc-icon":"0.15.0-canary.339cbfd4.0","@material/mwc-line-ripple":"0.15.0-canary.339cbfd4.0","@material/mwc-notched-outline":"0.15.0-canary.339cbfd4.0","@material/shape":"=6.0.0-canary.f172b0f90.0","@material/textfield":"=6.0.0-canary.f172b0f90.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BRcMKzisDVl5uXHsxr5Vnn16z/g1fIse+pAUtaY7qUlndNfnMQoi9AUjDNA/iol4vfXjvd1ReQIewGYGXxqXHQ==","shasum":"66754af9eb2da44e5d200ca1b822ca60e8247977","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.339cbfd4.0.tgz","fileCount":20,"unpackedSize":264672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0agCRA9TVsSAnZWagAAIzUP/0vR4FgpY9vHG4J4U2yO\nwxOJaqIseV66ofogAIyhR9bFTQAm9E7PbXRieprbxlEqpjtZif3ER0rHnXdN\n0AQ19j6AGEbi+cHzhGCRHbU+/w86Rpf1WdhT9VZYUpheN2DfHNiaOWh/IlDT\nD+94thYcl17jHF9NNHQCmRyv+aFXFbrGrwCArQp1c6DkURRlky5zXxas1UU8\nUpFgidZLjnXorCM7lihEiBGcgSVs2NPRVnYOHbNTEpsGxoAX8gdlWvmH1v2K\niVi6BwHsINcJXvzbeekrGHdga7Ratkpz+rU6TDk5QyLQ4ET4eHZq/ytexBcK\nRwSCRfQw1f6rKr9fBkp0yad88YwxfnDdcYhyCUAckBhpS9SCnGB0p8pZof1Y\nMn7iSlm1ojwqgR/G3BGN3Z8uvud7XX3fbqZTDnT/lUWmKXmKNE5IaqJBa8pW\ns1lKP/yzVG2l89klPZH589iO5IShumCVVmqpjKQ2d6exVbi8avnHO4XGIXHY\n1y0pe7tgHMyYvo0CuthZc3AdptmmDoVoJ4TH0Wav+sW3jct6QEcV8cpTSNV6\n2nRj3NAbGx5Exbg7FiqOW8O26ELQrywoeBbk3uS97eKTTTxmsc1EDyvKlZA5\nWX6tac01ggViFhrG9fOHv1McKY7UPb0IHSzZumRRTYwDYmgSqMShTGBuBscF\nHGau\r\n=VJ4/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Kc4N8zCTVBc2ULT0fsW7skSjIoGRzce0EpnQj2zeQgIhANYBm+V6R3YCEVjEVX8W1NA0rQShgHAs08g6rQ0llJDm"}]},"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-textfield_0.15.0-canary.339cbfd4.0_1586972320214_0.9830457470054432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c02642273.0","@material/line-ripple":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-floating-label":"0.15.0-canary.b74ff19f.0","@material/mwc-icon":"0.15.0-canary.b74ff19f.0","@material/mwc-line-ripple":"0.15.0-canary.b74ff19f.0","@material/mwc-notched-outline":"0.15.0-canary.b74ff19f.0","@material/shape":"=6.0.0-canary.c02642273.0","@material/textfield":"=6.0.0-canary.c02642273.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HOBdJMS9z88VZFYRw8GHuWnOY1H/RuV06qGStAqFkyfY6Jwq1ClJS5gMPWUjKxIWdulEY49RpBjYMbPMK9mKig==","shasum":"3284698efaf5ed1d4b428092b89d36a71ae8b4fd","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.b74ff19f.0.tgz","fileCount":20,"unpackedSize":264672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jQCRA9TVsSAnZWagAA/E0P/2l9zaWtPdf50YgZBixq\nK9PjfyOucqK/yYR72MvN9qKnqXS17DIqMfNKSzpG+vsw2tYUJloSdr1JvbZa\niVT+L7aI9QIm+C6Hc3iL0QX71D73h4gCrui68w5X2F4okNPT07dONtF0EBHT\nJqjYNiOwUM7GYMxr4OBO4VxBAwDIRgKPLFlYUwJ7VmecvkbnjMRSqZ+iqDFz\n7xdiIPYd7pcQbT7a+lkPFot3wQUawkLQLb9uHtJtu3Xnx/zmyr3fopo4a5SF\nkKUi9orvpZd/yz/Lb0W5FhPpQWQv3ojfdvlpVjQjS4lIQ7Rc2w7sa451OuA9\n/lloSiBjgzpdXFLXRcQM0tnLSNv2Rz7xlS6P//ZKpgV0e4k/0bFYnm7fUnFW\nQlobO7xAQ9/k18x4tw5umTxDSNRlHeGAT+zB6EKxbnDu80/Oquv8uiSrIqyr\nyGq7jUYUcN9L+LJfq68USKbDiQxi0Tvxyr+LXhLCglzcMSdAqAc25cSxu5aN\n1EOMue72LVF56QACJVp0vItzwJeCwKS7AiPSbin/mRl7zkw1d+pTdaFf0Sjr\nZqIl1XkM/yC2fJjpaiLEErco/vQr09rPQglBvCu6g6hy0LR9R6uIpBpk0yJx\nKhvk5Rv52OVKTb1CkPHapIKS3vkoefoFx6dOyWpLw1oHIj95PtWSJ5a45NS0\noVbM\r\n=44Wn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDkiRjPIW4CpqG8fwA+mohJcTWcfqKfN4SUqD12A7joAiBV6th6WQdHR3Ntl9c572nD7NihF86iqsljLM9X0P98mQ=="}]},"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-textfield_0.15.0-canary.b74ff19f.0_1586981072527_0.248301085141041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c02642273.0","@material/line-ripple":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-floating-label":"0.15.0-canary.aaa16853.0","@material/mwc-icon":"0.15.0-canary.aaa16853.0","@material/mwc-line-ripple":"0.15.0-canary.aaa16853.0","@material/mwc-notched-outline":"0.15.0-canary.aaa16853.0","@material/shape":"=6.0.0-canary.c02642273.0","@material/textfield":"=6.0.0-canary.c02642273.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8/LapdRuU4kg0zHXBOJ+17/0WdNSfTQgpMuf9gfiOBVokZIzs4qj9RlozePVsXvqEPShPLJGFhPRWGh6JcZrbQ==","shasum":"b9ead35d96231953fabede3680aa2bb7335bc597","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.aaa16853.0.tgz","fileCount":20,"unpackedSize":264672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel418CRA9TVsSAnZWagAA67IP/jJvHl6bxI6YU0RWYvsi\nB54ZLWQDKkLxmW8JaEZIPwLA2WUcZmOUSA+E0+reB78UWU6LU8YtvSkroN40\nqoDBmACWHUc7ksDrLRisjFr02U94NvhGRPlzmnAhicFBhv6ROf1EHJv4qBpi\n2pr3XDgLRGYBhAptRREim2JJOC2/2sy+1zC4h+SFkAGOsuW/EuqUucM/bmx3\nsaUjIgBuTFzbjwA/dcctwvyPAlpr7Em35J22bVvolAk5H6ELTBcn9IeKLXx+\nUwONJ4jNiYcQXCSNHE6RwkLgPD9uAw29UtXJqCeBIXA7z9Z+ksJjzVMBpcPb\nS4AtLel6/WE/g5nINCaMiuMhX0pppjFmyRkofk10GfX2kSZFDtpc/mHBWDb3\nyalvrX7GQym+KsT/UxfkBt1LxGTIixCqwqReJzViFvc/f6Tm/GvFQdG3ElVu\nNrFOv28OSj5QBPFmCkQvh5YVGcDmsZ3Xck+Qyem85+sASJVtzDdg41pSmAKs\nRJ3R3M5gVmzGGm7xIWY+cMotzq0SHVlYausrF280q/oTsbQ+oUeMqqBIBew6\nkSy2lypEeP6oX+Jby6X0Xz/IUbqSMdTbl1yCbgEK0Ss1vxPXykQkupLYtnwg\nWfYRuXovaKjyvB91IKldNuo3UdZsCRvSZCfAK6FQuNOzA0qAsw4AI10AgV5L\nE0vP\r\n=DpsT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzfLfsbxzzlD24yZ6fOY17Wpua4oSsURUHwZ46K4rgeAiEAtsre7ZRDmKgYd55xhb67R+S16Qf70Lb48f76JnDriPI="}]},"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-textfield_0.15.0-canary.aaa16853.0_1586990459762_0.5535670278794205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-textfield","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-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-floating-label":"0.15.0-canary.826b23e7.0","@material/mwc-icon":"0.15.0-canary.826b23e7.0","@material/mwc-line-ripple":"0.15.0-canary.826b23e7.0","@material/mwc-notched-outline":"0.15.0-canary.826b23e7.0","@material/shape":"=6.0.0-canary.ce6cb7024.0","@material/textfield":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=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-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NBKXRf+7/1zfOGN2J5osgM1nk+40t48X/IVtS6VFcXympmeGq/ULIUOg8N3hSypIhkFCUMJ5WypkAgalaG6sPw==","shasum":"2813fe70dbd3f0f636ab9f31f99d186e27bfbf70","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.826b23e7.0.tgz","fileCount":20,"unpackedSize":270300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKp7CRA9TVsSAnZWagAA8XQP/0LOJh7TeNK/J2ql/i0W\nj5hyhO7L3lYP1aE+RID+bNn+xtH8olx7/2Lvxe8S35hZ0oOwgwRTCF8MrQGY\nJXyrowR+LI5kOFY7C+BXLjJR4qUq3e2FW757hTmfItapCpnrvEiQahY6Rexu\ncidMAF73bDj8RP72vkxmX4fSZSFYxUmQkMPAzvOUrfKs0m+P/XizaJobDnVI\n45elezyXwHjgH8gTnOKMClr2Ql/F55mT83CtE7tS8oGHKahOZX83NIal/vBP\nuYVb2y57Q1i7s1tjRgK1tcQr3Zylv8ivMgMsQaCPwNK39kUc4Yc5y+xNtAli\n5dsed8uJFVZ8ONwQmK4BRsbyAwxnzujuakQMx3TlLW38vECH3ro8BxJLJDxA\n0zMCevklqzAnw2JXqs8lSSlrAZRBq/vH9ZcLzwYkzo0KYiugZ4FipTl6FfAA\ntXB3ElJX4A36lmheRypE+2+FcfxWAeg3j5mYnKUkbaku7v2RRMQsqsUpYffV\nBUMg/abklwWKpIBlGNUwb5SXZlueDUD3kAm+X62purPgys/g2NVZx63pSs8k\nTYUWrfa1pxJ9lfa3FcusBordDb2ZPIfD+xKzLogR9Ba3yXJ8wejUDIKae9g5\nMGVpT+lD4vpK8x4hRRgTt18B2MMbWFKWpUxsB3coyFB3qeEpPuKVpuSwkzn3\nvDjN\r\n=jwOY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfgog2DQrkMFF4FAfSZGPqQeTa7mZyh4LyXlSlm5mBNAiEA8TAQNSDyK58nOUaGybWbAHgSsvc75p5o+HLYqiW0sBs="}]},"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-textfield_0.15.0-canary.826b23e7.0_1587063418789_0.6422475027187584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-floating-label":"0.15.0-canary.e1ad2b2f.0","@material/mwc-icon":"0.15.0-canary.e1ad2b2f.0","@material/mwc-line-ripple":"0.15.0-canary.e1ad2b2f.0","@material/mwc-notched-outline":"0.15.0-canary.e1ad2b2f.0","@material/shape":"=6.0.0-canary.ce6cb7024.0","@material/textfield":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UOkyxzhFWCNvFnrw9XP61OhUHIg7d9k8fzxPMAQWYzOxHrWaK72acuFAu30buK6MtA/2W/u0fhb28y8AFu4h3g==","shasum":"cef11449126877e258321b7efde66e783bf23edf","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":20,"unpackedSize":270300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVECRA9TVsSAnZWagAAIQMP/2maEVyhbBUZWo/EAf51\n6Jdgg9MtNxoTs7Hgk9W/zswoAdZzjkS51Am/VF1ZZQ9iuV87HvcZvGbHvImK\ng4EV9ugeR0tHKm4g5pk3L0J4Gts0WtsnCsANKY/Vfdp5VN7jL0L4S0FGzX4R\nWw72nnY6LemkRg1/R5MfzKbjJvykLAypBI/XZceIAJcPXg/zL3M3RePfg15m\nnfEqU5wKBfyEeyZ44hmiQnszgp61bJSxVUkY5v3V9oKjW5UKLIAT6+PrGpPS\nwlMPgUx1H6EX4fzTXSCee+W04oOfl74Qh+MswSffalgt8J4yHJAe6Jox4esL\nP5VD3MiJu+vBoOmNlJfcmj8mwqawdbFk8Z1tnIH7Ihnv5t6kekPEAeTFxKlo\nuEh9YYfyDqVMvtcc9f1GPuITsuSkOJU4kWDX4GMqss2Grc3zFE0ob4ZxnxqW\nW5Rr2qNvL4KnhTHgGNiPNIyc2Oww50w9LQwTBvtas/l2SvYwCpZ3QMWu+/hr\nHbcxWucm1vMOiMlI0IoAOIroCd8KC6JULigeT2iqFO3XNWSY/MbbvEe8Ukje\n5bsCRHtfF3K1tlWcAxkNB8lpdIk0xlsb98e5mavgHZx/FrppP4su7jwLCoAS\n8Ql1nAMMYxN9v+OdOrSRYTWaF3TDkZeHRcVs7GzOneVuGAOL+Y8SDrwEQZix\nFdQP\r\n=i679\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANTwwucF/CIbiXlws7TrEfVAESYYWBYp6v05j8vx2PdAiBaqCOIK8axKOkBW5mIeEpeX1G1FBfp8Y6gq5G0ZwwnuA=="}]},"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-textfield_0.15.0-canary.e1ad2b2f.0_1587164484015_0.6242170691637297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-floating-label":"0.15.0-canary.bade5580.0","@material/mwc-icon":"0.15.0-canary.bade5580.0","@material/mwc-line-ripple":"0.15.0-canary.bade5580.0","@material/mwc-notched-outline":"0.15.0-canary.bade5580.0","@material/shape":"=6.0.0-canary.ce6cb7024.0","@material/textfield":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7zhSVlmh1a2Na9ZJlKz6pbMgzdMqzwP/jhYtuB4W4+AH8/fB0RFGeda/O/1MiOE4zwhO42O4O8uO8AMBX9kMng==","shasum":"d6701c1c4d5bfd35695835be0aefc171a001dd84","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.bade5580.0.tgz","fileCount":20,"unpackedSize":270878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjlxCRA9TVsSAnZWagAAvJsP/0B+dd9QbQjAzJK+Te2r\ng/7rMGk4dpqHvYkkq+5JkVij9HU9Pa6G4oYJwDN0fLZ4zqzDasza+x64kHn6\nexwZ24Hg2r4enzH+MXOZz/t67AFXuGO5dZ21yIJPd9lbi7tzQBpJToX5lluu\nY+I8kwxg6QHd6wt+TtSbwYs41KMW5ZCBCK3r3nKxLEyB3S6VUjz2kIyZKTCw\nw9bqLzOzKFtV/gEUx1PBEJUvnEc5Xb8zCZ2208raklJAxIT6L4vsNjAgiqpg\nowIDOP87AEW4sD288K6bfQKV3LBTk095yw8opBB7dLJVlJCnlmxn70YHXZfe\nXSYH0SU/FETVaQRpdTOtYLwuuM7gRRP4dKGv4e7Nl4WkC7szn5IYw5ewMju5\n5zKoGCYxj/IpuCPRPUzdER6VHU53D0xZpqITfZ6Nm2SORhkAEHDmHLkUioFp\nklw7Pnpph1bGaOknkaP9znp4gZ0hfFV/frHiXfZ+x4T8ZOLOWj4/MNrzuZgw\nsFVsZb1oSBU4BUeJA+Q74MUEb201kQNXovFQSKCCZHNfBSi4aZER+Aao3sUr\nqiecL72scqLh9KUTt9W8Bv6woALDS2ogDZVLAw6vk76T9fVYwoDPuxdbF9pE\nKTVnMfdawkBbykYQvlbknhd0lLfzrdkY6dsw0bxUHHjD/BF/6h7FclTNliUT\nt1Ob\r\n=xjKQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw5BUi+TdsMXxQbxLFceqvuqeb2MF7awL2j0b/p34CPwIhANhlfJB+3Z6NbZ5NPA9IpQyMogg6/cr5RXloOumK77mO"}]},"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-textfield_0.15.0-canary.bade5580.0_1587165553474_0.7219281530601465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.ce6cb7024.0","@material/line-ripple":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-floating-label":"0.15.0-canary.dae38247.0","@material/mwc-icon":"0.15.0-canary.dae38247.0","@material/mwc-line-ripple":"0.15.0-canary.dae38247.0","@material/mwc-notched-outline":"0.15.0-canary.dae38247.0","@material/shape":"=6.0.0-canary.ce6cb7024.0","@material/textfield":"=6.0.0-canary.ce6cb7024.0","@material/theme":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s75lsMJKSQQcDd4Fh8ILj1/26BkAEoLPIIFO+Tcepyh0T9W89Sg1vgqmlPqSym6/+KM0LuQ5JpqEk4s/+tDInw==","shasum":"c72d76659aafb6dce28f6839f929ce92690eef05","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.dae38247.0.tgz","fileCount":20,"unpackedSize":270878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbJCRA9TVsSAnZWagAALbYP/jSvImj0botCRRU+vq2H\n//fM4B9Bs6rl1LRRJjYzWCYaxkL860YW7YAYCEPpgm1RfCvoLcT51xAoyuj1\nqv9oV5WjDGeyqKkq3f1HXmhRylYP4TYH6ex6dYIciXxyYgL2pYxVntZLZNHF\nSYJ6Cmkg3owu8kR1raMFnYFQVEPEPTs0dO3b7NGCfWX1uDK+L4P0Q4jbxuE2\nEaNUOfpkjd0G2XrO+1SDyL/XN32scn6rl98B71pcmruX2VsddnYoPxKLiIUb\n8aB9T4HKsCEuZMvpqFTAXzA2mU11yhHrtlxpXKigVPlzByriWVJjb7JYyIWB\nqvZ2X6R2IMFAVTdX+DmU2KyoCYG7Bn4olELz4DVfUTlvykd7gho7b6Gzj7y8\n6kklyNAcFKnb/6fHKYRfwbPC92ZaiYx+X6+nq0EA/BcdYOMQnnJSlK6WS7gJ\nVu8HP4M3eo50kdy4Ik85baGgWUV77hmvFHfuDUI8c4BVXgYIxuthfdvEktp4\n2srEsz+EqZUKHU77wzNjnvgcgDjKXJ/9V8jeoRjMC1NoEka0ob8zax7lbk75\n84Wk75MGdnSTNYP0AEDL9+m96RlLakfBHrLQAxGXG/q3AmcwMgegmJQsuIck\nBRaUkH8i1E0d4QDMK7ajoIXmXlhm2XbWHAXhC33w286rT7T5nChWsTyh2G7I\nqM9u\r\n=42x7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9Hth6KgrT5go1KTpElCBk12XvbsCocr5VuqRtrh1SoQIhANUOZN20bHHy/ySEE7qVhcLEyorlazQuLPnixYQLMlAH"}]},"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-textfield_0.15.0-canary.dae38247.0_1587168969367_0.673930342228086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-floating-label":"0.15.0-canary.a04c0b82.0","@material/mwc-icon":"0.15.0-canary.a04c0b82.0","@material/mwc-line-ripple":"0.15.0-canary.a04c0b82.0","@material/mwc-notched-outline":"0.15.0-canary.a04c0b82.0","@material/shape":"=6.0.0-canary.c4b4bba96.0","@material/textfield":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jW6eHQwJtDWCuA1GI73PNqacEbdztD/Lj2luOPqYLNEXennqrhxb/okq5aau8PsbIbaf5otThv6YNVgijsMu6g==","shasum":"b73bacb47e27c7a3715b2b30f3c8d89953e0ee97","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.a04c0b82.0.tgz","fileCount":20,"unpackedSize":260276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksKCRA9TVsSAnZWagAAF1oQAIAvY9Ln0vYp0g3DZhoM\n5RdQxKopxMeGGNrz5nlhq7SeQ3ko2h1HqXLRO9p5rSZiS9xnydCXcL1DPs/f\nW8uM4zZIB72GLVvDt9225qY6UWAz5boFCsK9aBw/n1OQ2J25rwLAhAiIwIB4\nBqTOEmIE3lxIuLvEiHoeuRf02cjRPvhUWbmQvWGk2sB0f/tBNBpVLwssIehu\n3prPnbu8T/M1gdtWCCfTgJ905XeRfAVKkxvmqdtNETv438TjjyLXjXtmsj4p\nvlTK02FlQD16Ax9nFm4QXcVyiq3U6B1KKniBTpN4HPBrvomZK1Jd4YS3OD/y\nlQMi4fW3BbwozmqVrh5tgKfftdkuFvSV9gNTIba2DUvoZZRJX0pHMvSk6ZPx\nGnN7Hw5uIOPX0RROnk0ScXScZFVaVvVYA8HWIh+4lOo8rGT3EmvKmJzpKOkn\nJhBrCw8wSRDTm6iPNVmaPeX9C8YZAPu/FicKu3invSf8ue2qkImPAG2H114r\nBmo5zX9RhT18Wv5XQK/6FhGXZBW/DGETym1Sx25ClmMLJUeYogD3XjJE4zvx\nL7rLfdL2OUiA7TfJWvzgeWpbwU8BQcr2F4Z1+h6u8VgRXwS4IXT/UBerrizG\n2bWZqKZSET96vMBVxCk2rAycdC9Ij2+9z8IDLza32sNLGmrxEmzcV0nXR1Aj\nRR9K\r\n=S+jC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoXKXpgm4CmtQQZ7dq0xLJIg2cdLiMpmUqlUbfa6g44AIhAPezMYzg9AmhkMLZ1nVePKShOQq0q2vGIJh5R5q/vD3u"}]},"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-textfield_0.15.0-canary.a04c0b82.0_1587170057617_0.44488987253031276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-floating-label":"0.15.0-canary.715decfe.0","@material/mwc-icon":"0.15.0-canary.715decfe.0","@material/mwc-line-ripple":"0.15.0-canary.715decfe.0","@material/mwc-notched-outline":"0.15.0-canary.715decfe.0","@material/shape":"=6.0.0-canary.c4b4bba96.0","@material/textfield":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EvLveey6RxL0fnc2lhDEAjZreoxJWN0JrVDJ4Go79UCE7QazITqs38c8w1UvdIAAVr72se1RqH/z8Ce7+YSgNQ==","shasum":"55345be766273cc9ca0527f3567a5d9502beb68b","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.715decfe.0.tgz","fileCount":20,"unpackedSize":260232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetjCRA9TVsSAnZWagAAc3MP/RZFDbZAvqIjp14Ez00T\nsSS9SWOlTMWYS7M60ETyydN9WgnykdPM8vNUgnRtA7eFzlbV23HWFAS5uhza\n1UeKv6rCEdWVsFvqc8qukuD4/rkSUALCRUqu4kYcBGd+30QVIH7xqrXRWgH4\nwEmXm19aXtW9V1RVtZ2TwNjSAfOhBX57C1k7N0JXSBLgdTuSee6kUBh8eltH\nI9hxmNlqWlVOFfGBS3aY5k1SV3kKX3EH1wa5Avd48p3N0FsKD5itYAxnw9y4\ncJ+dLA/I+fUdYbJ2xv7eNN9YWiq2QGboRZlDD/KrvTf23hhA2QU1UijQa1wr\nPQUqxOKi3ZiRH0qj1JgXCi9n5xxGelC6yScT9VpY44aWz8U7qpbn138qDSLq\nDP9sZX7SPMFdm6e9YARIOpaUYnWUyk1y5ymCH5SKa9xfRA3g6eElbofE3MNI\nYRg0CODysbfSvGbV50bUqfI3aeZE6hm5xZqojLQ8nvSWP1vfLtkzbgHJ7wxi\nNaMBg389+kfEIWBUpBKkzJlzqZLhElos3nV4dtL82U9nE2TTCtj3Md7PMiWp\nOp7vp9M7ipWzW8fgiOWKSTgV2Jq4klMPIxggRwayeii68DBqA4dhwUYaB38A\nK7yXBxvFZm+kYtFRNMAiRmWQdKmUcpzWA2sYlnitjyEg3VG9+RrQMStbQl8p\njmeX\r\n=2AI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVGR63Hfp3fnxhKIfxn5oZdlDQZNMYuSC0x6yVQCA0vQIhAOY3r14bpvDRqSHoNG0t80homLKwj3yM+K02oTOVRHbO"}]},"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-textfield_0.15.0-canary.715decfe.0_1587407715307_0.5530399316366441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-floating-label":"0.15.0-canary.c862cd04.0","@material/mwc-icon":"0.15.0-canary.c862cd04.0","@material/mwc-line-ripple":"0.15.0-canary.c862cd04.0","@material/mwc-notched-outline":"0.15.0-canary.c862cd04.0","@material/shape":"=6.0.0-canary.c4b4bba96.0","@material/textfield":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rexYftHS051a7uOJJDV4Ou+FBjdTeQWpUwHad+czPGB9KD40upUmc/e7MQawf5BM9smJIVbdwIVNjr1vIe/Byw==","shasum":"1f8582549c4278ac1f1e962eeb05e483ac3d40d3","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.c862cd04.0.tgz","fileCount":20,"unpackedSize":260232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVdCRA9TVsSAnZWagAARaMP/2YPrbAQc/Kf7F08eXGh\n3yJ/qyA6MVyPPdnPyJ88VeynQM6p79Qs2gGz4epBRkWwlYY6neB5xDLRzTCm\nf5h65RGKsqYHS9IrrBc4woiP7m6kDphV5CNrN65gmEx7ABjYDq9YaCTKrKoq\nWfc9W0rVMgRRwIQoevhH4EyfoomYGzM8dP6E4aBMuL4wiv8x7Y1zGqyzfDL8\nTnnE6ksjPTbhjfyr7eiV8R5XywXSwBNW0maK3CRGKVoC1Z1YV1spSuA10WEx\n3rQwAm3La66HtBd8kIsIch3AN7CW8FlyTYdXZ0ss+RCn8A/M+jmgEZKVhVwh\ns7hb9xwBm6JyNj8AR5GWolYdf22Pm/RGgVQE5BMmiqc807brGBj2zVHYaJlV\nPoSshlFRJ8wRbUjjbiivMzRaBCnPH26QR+yFmMK6G+JSIdybgiqjLXSFdqkB\nEjndlI+ppDK/GYpb1+kVDqs87h+m8H1VbIJqRzdX4WR/p4dT7jhfzicRNa5W\nx5qdZGLiBKJgi6mye5z9RG/Q3FUckoclHFr4KnqTb+G/TJZKlTm9HlsA8pym\nQC5+DlABXQnYKcA12WhFMZrjE/gLVuEr3pWtpx29R96XyoyiY8rc+UH4kIat\nKWmxMfKhA1crsomSg+iuZrEA64hGVHmhc+RO0Dn06M44+PNO5hkl9Ns2ujdJ\nNy2h\r\n=u5dh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfgo/Uoe9AUac1ZzfDoUBDTu3TxH4LARwqgZPRqrwrmAiAUq+ahD6zprDa88D7aZA4EJ+MnG1dv/r6JZYzL12Gqhg=="}]},"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-textfield_0.15.0-canary.c862cd04.0_1587418460766_0.09057585502681831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c4b4bba96.0","@material/line-ripple":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-floating-label":"0.15.0-canary.e9b01b35.0","@material/mwc-icon":"0.15.0-canary.e9b01b35.0","@material/mwc-line-ripple":"0.15.0-canary.e9b01b35.0","@material/mwc-notched-outline":"0.15.0-canary.e9b01b35.0","@material/shape":"=6.0.0-canary.c4b4bba96.0","@material/textfield":"=6.0.0-canary.c4b4bba96.0","@material/theme":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3dWKhJ49OlZk7s8ONUfPBMKHhQgYglDzlI0uAlqBHv5kJz5OwX/JsQyw4mkGXBdBXb8gLr24+PxubCK1320cdg==","shasum":"995c12c6c17d5f47549b8bae90c52ede0134d5e0","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.e9b01b35.0.tgz","fileCount":20,"unpackedSize":260232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBVCRA9TVsSAnZWagAA8Q0P/i9ZyvdVW68QOuTKlbYw\nFTX2gUfZCLPxYZ6s/7k0qDlBfial9QqsAFXsdTk6o/oL+Kqcez8Or1gA863P\nRLhfYSFtikDoVYmy8x0J69K77pdcTa3TckIfu5cCK+Pb3p4kt2Hnqt2se64E\nfBmqb6IR+8uLbYsYFcKCnStBOzeEk1F6Y3e6ZPhEiHDEXkjOfxlZeb+BmyGZ\nIZIrKMNzUEJ0KloU3HX15jx5fqtBgbSS8dUMYQFYKpPRE0KFT80xtmtWvoEo\nti3aNrlyzmblrNv9lBSnKgcLbXEPJ6epDURFMqEl5aW1B4h+yAUqPYVOtUi/\nmu7qdMGb1Rxleki7+wDikGZ6glTFHte8l/areLhofF+fEcTeFiI9N3ECPysL\n6/gyoXlX1jUPwDMCgOHS1OKs+yyZ5N99eHRBCDdVp+3Q00+WYQ7AN5naWDlo\nAvSkmWdW0RN08v+t5Fr6iP94FNKBbwrRM5y5lV1BidSX4IvTuPZOwsK/BRcf\n4mJZq5+tt9xMWsLH8j2319Cpppy0nOgdamAH/bRdHwa5OC+TcjI0uLWCXSXV\nA4t8rD2gh0KEHHN7GXp2spz/ltlyyHS9llXqvW0y4FChFmlRvFcXpNP+2Vb8\nOxfdFsWwp5oEPEESbyTIkaDBFgONEvR+lEcNS2QW7GSp1W09PCh6rOoVYc7X\n5Z6O\r\n=AuNg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv827LxJaVRV0DInbTosV+834qbBrvTQHX+tqatzeujAIgeyrCLBDpYxw1KypmIV2p0WLr2VDBoz+znCbaOVs04G4="}]},"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-textfield_0.15.0-canary.e9b01b35.0_1587425365282_0.8297550688191697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.7b4482402.0","@material/line-ripple":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-floating-label":"0.15.0-canary.ee7e8989.0","@material/mwc-icon":"0.15.0-canary.ee7e8989.0","@material/mwc-line-ripple":"0.15.0-canary.ee7e8989.0","@material/mwc-notched-outline":"0.15.0-canary.ee7e8989.0","@material/shape":"=6.0.0-canary.7b4482402.0","@material/textfield":"=6.0.0-canary.7b4482402.0","@material/theme":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BN9DdV1ZF5BlkaBznD1SjDmVVQQh0Zt8+/4Vzzpsdbfsm73tvLcXxrZ2eBL/ZW82B8bmZUmHnHvhWjLMqyPHPA==","shasum":"1d23d7947b0423d5a54ddea9f4681c83e0cc9d1b","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.ee7e8989.0.tgz","fileCount":20,"unpackedSize":260232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOGCRA9TVsSAnZWagAAz+4P/2ZNGcky2mG/gly3jZ0l\nnyTVel1dEqEpANlNxB9/mBWJ4VXUa6lCaOv2U1WhU8NJHPOM5EYnm43esLnn\ntuvs/ppLmrWUMPTacz1lM9DwYs/Li9HwmDdKw8WqISa6UcJtVplbc3mLbvki\nKNI3gQGzF20iLZoMHmnL+48Y9CIub3wctJvAf7Zljg0L6QSMjqTPRopxZ05t\nWOEiFI60tJPyQuP7E17K39Rc6fOYGtX8ZI5u8r21J+gK9BJlS4HgvHltnkhJ\nxnoAaGRH+RMRiUUMub/+CdJkAQBtPNvTuWcmSThHh2WeEf4Q2PFGKeMr7+0D\n+0r0wypMdZYXpoC6bMX7StQp2xGTWjOk+JppXNjsuofAvi0vr+ck6Bhx2Tfz\n79beFZIDT3SxK7Sd/iQ3ulIj3jfxWgrqVN6u0j7y4gHvqZdJEJqZ7LSL6UVi\njL+sSLfAWTCn8NukJEu2p+DDNAZGXdpuZ+cFBunBqsltcMM+ux8cALhpyqe4\nWzXGkDA0Kw7+YMHh+S18/lLj8itql32mISCq0kUlgEpI/qMVLYzUTzTwTpN1\nUCmUbcLQG2IXOzcVqgv6JnGoGZEkeulrWOFty6PMBrbuc6+xrFGJZcUiKr8o\nBiQ7fYBHZD48Blj5XE1rL1J0iT6sR8XqeJZ9N3rMRTSmbK6BSqs8r9TmhDX5\nBGjX\r\n=TQ1E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSKD9kws6hg4BZv137uXUpZ9117b+jTcy0svf2HnCeQwIgc3qtnXWXwY1X/XYvjGCjoHRT8mMNU1WtqXkIFVJaHak="}]},"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-textfield_0.15.0-canary.ee7e8989.0_1587430278137_0.03470538080677521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.deda86d8c.0","@material/line-ripple":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-floating-label":"0.15.0-canary.9bf47ffa.0","@material/mwc-icon":"0.15.0-canary.9bf47ffa.0","@material/mwc-line-ripple":"0.15.0-canary.9bf47ffa.0","@material/mwc-notched-outline":"0.15.0-canary.9bf47ffa.0","@material/shape":"=6.0.0-canary.deda86d8c.0","@material/textfield":"=6.0.0-canary.deda86d8c.0","@material/theme":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uSE6unqx66MMkFo4vhN1zcMzINzoYTret7GidVaKytG+B8Ms89oyBo/98PEFTtGa8zzhT8Saj2+wpECsBYewPQ==","shasum":"f61a1ee7e500167b1c51210f561a12bf80ed5f5c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.9bf47ffa.0.tgz","fileCount":20,"unpackedSize":260232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2BCRA9TVsSAnZWagAAhbQP/Ra77BDkjzrwu+GCNo1Y\ntPlS2pBTTspXYqNz3v7CgYDfc/Nw8zz4I2C/j+evTYiNEcWebdYrhRxtUAM0\nopc9P3lwJeYY5cF0b/Zt1wm3fVyYQSyUnzGwE08MtsrUWKBrXjtgU5bBieVr\nqk0Bk87QAQ3MJHgMlhallTTKOKrS5amI94DVvQyDu0qehrp8cM/PGgNGkfsH\nBvHRd4f7FSHYihiIDm27wnwNjPuVysQZMbHAzLIE9rTVM3lDUo2ehvucN4Cj\n4laIsXm6+0Z9Svrc/DztavEPsdjU9vRQmTEJQUoCqJZ3D3YEMQn3IR65zDwF\nD6UzuWJyDsR8eNpePI/6nAK/0C1d/MdPotJWbEHisqHTEx9Ih+HWoPxtTUZS\nEzXc+YGq7WwAFuFxaSj4w+vSrhf7ZIri8Lmj8TTtedfKUQDqjdRl026cLzeV\nvgfZDxIHRMVma70UDcmA8P/p7m60VcZ49OfOyKSkCLuKyb6v6Fi6i/Sgk2wy\nLq4MRQxETKMqb0tk3ww+3lXVP/WCDfEfQiV34yH9aWjNKnBR1jozeyLDY2pW\nKj8jdney5H+GiY3awk9oqfv5N7UXI7S8qE/rabj6ZevxEM4cQGcdCggTHS7j\nUPNhdQR0JLh9B8Wto1lo/zrJiZG4oqNQCgyiMvriPBzC7+5hHWwatFeQDwtr\nYpq2\r\n=UHU3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwQj3BYnmEYnPVzhKnl9Xm48qcNADBCJxIQuHa2WEmeAiEA4ezmEsBjF4GkLfFuXUmDiiAoxbjE6PiuLhppVkdXO6o="}]},"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-textfield_0.15.0-canary.9bf47ffa.0_1587494273408_0.8721685025820887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-floating-label":"0.15.0-canary.078dbd98.0","@material/mwc-icon":"0.15.0-canary.078dbd98.0","@material/mwc-line-ripple":"0.15.0-canary.078dbd98.0","@material/mwc-notched-outline":"0.15.0-canary.078dbd98.0","@material/shape":"=6.0.0-canary.c141801d5.0","@material/textfield":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9iXZizEsRwgmyW4Yyke/ybXRjhjzxxje/unbESat5gmZ/mG+bbkgRB9cAmMqfE1kScFrctj8EH9NgFdBs2/k9Q==","shasum":"a7135116131b1aef6c15134a8e2420d26abf73ae","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.078dbd98.0.tgz","fileCount":20,"unpackedSize":262824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GuCRA9TVsSAnZWagAAkAMQAIu3QwO2HemI5OtT3tqO\nFNf1NAbKdYhKWsOqpBPmTKdhnB4RwJXRV6+5Pz7BcHZryXOvZ4ER0I3uyETq\nfFrXG9zvuhmge8tF+NRXlQPypsVxrkudmKebXX4n3II8dmnWnBFX/E7qHhDX\nO4wSAUtWw+mpTJkSflIL0PG9ABYtC4bbZDv7sqq55crze8uPNONUC6wr7nP6\nBor2HJDpOhcg+B/o6Bq6FZENdwVH+OhoFHKMrEs/TeULNjXwCXYt+HB1pNMo\neIhpIkafUvxSIA4EFuXNKaxz3UE62DxYvDHBAgqWGDLcZiy4fsZkCwnzcjau\nbCWtZqkUMeNu9iq06SqJyOV+RwROk5brOwrktD7XdBqX/kiJga70pickD2ht\n+y80ksT5ozqwAOx/S+TrRtg7KqTembyB8IMcKHHxFhgC/yCR6y1M1s0y7ngB\nckZswB3iqwPhemqcYA9+TNfCd4yKpF0mc4Vkhqxd3mxt0CAY2Oy96Q3PsO6M\nyl2bN8hp6XT34kJf+BL1bCumRcxEowRFdj12KdRbxyd93jeVkyIHS7YPu8lk\n6VE8rX8LMTmxZJb3IwC7mAIXX/elTDwmkRyhYFQoX7wc+ddTK2gTGDGauIGx\noPlXFQimnTynzvpa1Zg0f1ORxWikQysNbrbpewGjmK8rlLQhBvRvls+/c634\nuk6O\r\n=e2nw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERYXlo2iRFXWbd0aeLudpWcbsCrwLNg2kVAjwixVyGtAiAhx7ilK2OpKNz4e/EuvbEDAMhTVuGvdRyvs04w/xrMyA=="}]},"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-textfield_0.15.0-canary.078dbd98.0_1587503533980_0.9221909159035215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-floating-label":"0.15.0-canary.953015d6.0","@material/mwc-icon":"0.15.0-canary.953015d6.0","@material/mwc-line-ripple":"0.15.0-canary.953015d6.0","@material/mwc-notched-outline":"0.15.0-canary.953015d6.0","@material/shape":"=6.0.0-canary.c141801d5.0","@material/textfield":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tJ+cd501vBTqlttF9o0hEpjUjncn0zBt/qytHJ7vimiTvMICiLMkGyZv+awgkytupuL6bARg46LEJRM7KUZeFA==","shasum":"477ff59a0215a3f1fe3b34a44341cd3ba0d98f86","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.953015d6.0.tgz","fileCount":20,"unpackedSize":262824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cnCRA9TVsSAnZWagAAQxMP/RXCVaGMiUnVuv4LzUCS\nJEesv/KAlunvUGT8KYmpC8hPDAz2OP+gEyCeF3umQHEGtn5USc9+DnAed9BR\nj2ap7UhoV0mznlL3Pckil/yVhAW3Jdw1RNFP1lLPaMp1Ny1PHhB1A19g+BMm\nW3GU6K++j5Xal3KbZIOv8ma58J681BBxdb6YP0gyvuwxSfRrFB1jDeeXi6rP\nqqBfcy4YTZl3AZkVCDJi6P69/aXxJTnVjlIfSZwAP0tvaso+0ZD+mqM40WT4\nw8KfGB7yrVTC8Ihnwbp6/B2kAofq+htXdfuBCGNeBWpmQKmxP/SqsBE1VfHq\nm4SBRA+0Gk/2v1LlaK4oeQPOJ590t6qFLzEZIfETz6uhAeb9iPMoGagAFBS5\nu4wVT6EGfC/r1vvUO2wo2ldkhmcWdLYN2sW1nVQ1F9/D6YXJ6UQ1k3DptuZU\nELMzmLNriIYYpcUmQkWOxhybyabH/6FvuYK+LTkZ9fzYTX+4Ixifsys7SWsj\nHIQfCkzbj9BaCRB7LAkcqEnCi0y0n6clj0Ht60ysdhN6WGqoKdLKyZfb1gFa\nLjbNZDZ+aeLSQyF1deiyZxlsAIyWSTmDM+XtzJnl/mIvdtzMYi/7VdnacD/Q\nKwPY9j5w6t8q7SUJf3ofFxZ/N33FeodN3ukYs6zt6OIINF9K3QJL/6e7m61/\nxNGT\r\n=7cPS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0Vl5cV68ssVxT4aZFPOfkIm5aygsbWPM97T2yjIVbiAiAXia/uJR2FgHWkd3oOvYheujjPBhDeuW43n80ZKnZYFQ=="}]},"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-textfield_0.15.0-canary.953015d6.0_1587504935071_0.3121510594470158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-floating-label":"0.15.0-canary.c360ec63.0","@material/mwc-icon":"0.15.0-canary.c360ec63.0","@material/mwc-line-ripple":"0.15.0-canary.c360ec63.0","@material/mwc-notched-outline":"0.15.0-canary.c360ec63.0","@material/shape":"=6.0.0-canary.c141801d5.0","@material/textfield":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vCnuOFwk6i5eVIPJ/DjpaR81eSaQekFH429Ey0thL1OjIJ1LnlZVOoOr+APo097rupUQj5OB/gCp9DGJ+05zjA==","shasum":"03582a81b1d911d900535a49edae434f4cf243b9","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.c360ec63.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2ytCRA9TVsSAnZWagAA0OsP/R/7NAvodq7P6DIRQDQr\n+TTZS1V8+ioSof9eZNjWIZdwo5Ax8hxc6PxNuft5B7YuOjANw5R2vqLXxbVD\nuxFGjIbROCau8HtY+5tfd3eTsu6uNQp2v7mNYucI5Ywtvd6aPFYXlW559YKm\ngRLfeFzbAU/2OlclU+IeFXCHIcqkB5xt/nHTBaO4r5+4BrBXQIoZx5dVITh5\n/U1ixvXtwHpYZNcwFGkiTv0by0bkGpe3SZBUQjgYwSbNtcUl4t/8uV8OSeEv\nX0NIhMO1yPMwmqtvSFJgU0p/M6kAgbDXHM5+4/It1Q9AueyChh4Bu4OvkO4H\n5veQ5tapo48n7LKzN6Ll6IT1Zy+KOGGkobJzwdi9Z4QE6/5Za60sKqwJXMxk\nVF7in1dBrouMhJhonwYNB/W0WvTD5/WsYoPETX9Ptga0uzDCon6UkULN7o5b\nTCNYoAiGE2zbL7Oy5DP4aRsnlA2WyKHa6tzvLuGmso+7xLafGULcUZsWO32R\nkrcrYPt/71sGHnNjKFHHYyZnx+AUemXVDjkvNChLtYx8fq2dJZLCqGkL/C8K\n/zEW5VYbFo2BvYq39PYZQoPvdtkGEFnEGE8A11ymKrm6AHd043+i7Zb4q17D\nhnwakrS+rcEB3T+hIMDGI2D3Z1s7ZaSrX9A2bL6BRD/3Jhnt3YLn0XVDE5G0\nRSnu\r\n=b6NE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOK5BJMlnBJnTwzPPQPwrS/1gPN4Fu+fhnciILOD1R6gIgT2nAYkjktYyWf4YL2O+4RgjJ5D79fX3ESZ0J6wzlxxQ="}]},"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-textfield_0.15.0-canary.c360ec63.0_1587506349385_0.9126060204394153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.c141801d5.0","@material/line-ripple":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-floating-label":"0.15.0-canary.d71b65aa.0","@material/mwc-icon":"0.15.0-canary.d71b65aa.0","@material/mwc-line-ripple":"0.15.0-canary.d71b65aa.0","@material/mwc-notched-outline":"0.15.0-canary.d71b65aa.0","@material/shape":"=6.0.0-canary.c141801d5.0","@material/textfield":"=6.0.0-canary.c141801d5.0","@material/theme":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eCw03FTo5rv9dcibvHSeYxfPX360f1wsxqig/ftLluSgnqo54pXKYhpA1o9Nc0CxbO4GReTEF4pmf4mlgDIP7A==","shasum":"894dd6523f83d5bdd2f167c33355ad1b0ade4311","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.d71b65aa.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3W0CRA9TVsSAnZWagAA4WUP/2ECBlw/quzKywe6XZpL\n61janctTaQ5UCIYztKiXWke0DuAZaQuUd8UBPOawjokpV9zeYeb54Y/SNrTj\nfkwqWBAVMLp4zeuR/LHjkDqItuhwvBKpPzqJDBMVnvcTJSpBRFKzIwm56Wj1\nej+j9Cyu0O79QaATZeQqm0K3DKKwi70wF6dYQOtLd1CNI5CbY0hlrKmS8Yax\n/6EQhb8MbwOTMNiDLPCy8pjbF+vml6bW0T9FAsJvUrjnom8PzMSUrWAWwHmh\n+rLuozus3J9i7u/Qy/jboWP4hQOiX3jFBHvL6arjDgNU7TMQefb/ksvgT1de\n1cF06TEzo4ETpUzLmtx2oT8Ev0AfqAVEBgPFbPPeAsxFXkD56f8yjUzWu0iL\nl1j26lRDZ9gOqtVHa/FPJsMkfrCtbFDQG2zT+zeBtZC9TmcxXg2YMoA2/ccm\n2R2fUiJutsrBs3AveF04jKWIsiewdwIU2PgrT9ovIbPLGlBWiZbi/C2UdI0v\no+YHlmuhKLabh0iBxnQl4Wvilr7ygCIwonxm568yD4NmQQymitiEYorFofMw\nkSJyv6r39ErWjFaXlq3c8QvzPp5a42jkOHUSLDny9Dv+jQaiHe8Jo3ggVZWN\nUVUAHmwFSkK4XLFOm2AxywACupNsuCOlv0dlZ8ppzsvOLcF8HEGWHE74J7FU\nbZCv\r\n=F/EM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY5PDDpyUf2z5xeP856sygtirLK9QozbbuZVzwtorFIAIgF63IUeWviXwa0oIRImikNGiF14NkLlmDs28vuxUTV64="}]},"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-textfield_0.15.0-canary.d71b65aa.0_1587508660136_0.9555361949115795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.28d10a96e.0","@material/line-ripple":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-floating-label":"0.15.0-canary.58d51135.0","@material/mwc-icon":"0.15.0-canary.58d51135.0","@material/mwc-line-ripple":"0.15.0-canary.58d51135.0","@material/mwc-notched-outline":"0.15.0-canary.58d51135.0","@material/shape":"=6.0.0-canary.28d10a96e.0","@material/textfield":"=6.0.0-canary.28d10a96e.0","@material/theme":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZFxRbsu4gya+iZFPlUU5dTY0sbOHTAPdltT9019jGQTCIi8SXElmx4hlNHsDZkdyy4SUzYeYzc3flDw91utVnw==","shasum":"0ea352248dfdc192c7bf87f15005803a3b79d731","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.58d51135.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUFCRA9TVsSAnZWagAAgA0P/0DVl1vA0Dwe4Se182PS\nX79YC6fYrTVvrdj9GyiSxzwruv2haTY+5rrOEZBTmhbF1WmiTEJNGVwR1i7C\nhOLXtPijpVfDjoBtzl2ydOyNIlC56Ab8ps65qhFfetyyRozPtwfhZ178bht+\npqqtXU7Q3bR0lKOrHuvL112cLzVr5/9wNZx66PGc7zaSOWUdAuNR/Y1cKja3\nbMA3b4CYJH+wU/tf7rE3nRm8Y43TURdAw1T7joSNfuSvZNNwlxV8A5cZkYtY\n1TFSgL7WVq8jAUx8JlokaDfM0sUdsqqMFD/FAvWE3MPlWO8/F5Qbf27RPi/D\nL3mXkYrIZObHNx6Zn6P+CrsKhMJWUqcq3qPs8mtR//XjcYUzRTXcmEYEV3DU\nWOUcP0ImD9GBfMDbj2mkScVzcdWnnHTj3AUNg5wuo5CTNtaRpQpiihuPy4nk\ngGTv8DQouvKicrfUEAbjPR60wrClZfihKk9/rH4kPgsT4BLdLoheEUtiquPJ\nr795cggEAFtZjohohtUebAMxLTWHXYrx4jlhvKkodEzVRhQfDtIuE31yreLs\nN7W+QwOdUTT9WiMUJ6iuJ7Q1fgyj5GuuELtVHOuEIliaM73LEAJUHadW+8i8\nZzSxLv85Z9/k6t9MtbLUKEC0cefO59h1XjG8cJfL5IIifvXRLnws/NCab4FO\nGLAm\r\n=qADj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDZ/RWYDyyexoPzaZmIjpWONYtuuzviZI+Ea8sv/eYqQIhANs6KYYN6rfvSKcefRaP0BwVy+99hJ1MhsUGZ3HUiBB7"}]},"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-textfield_0.15.0-canary.58d51135.0_1587602692954_0.5263421231379237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=6.0.0-canary.28d10a96e.0","@material/line-ripple":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-floating-label":"0.15.0-canary.d0af8ba3.0","@material/mwc-icon":"0.15.0-canary.d0af8ba3.0","@material/mwc-line-ripple":"0.15.0-canary.d0af8ba3.0","@material/mwc-notched-outline":"0.15.0-canary.d0af8ba3.0","@material/shape":"=6.0.0-canary.28d10a96e.0","@material/textfield":"=6.0.0-canary.28d10a96e.0","@material/theme":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QOsaKBM29oi6ni9lJXmvpJAweq+fC2Xe3MmB5LzMk+9KWAh1B7Rf9EldiCrpxR5Mn2K4Q+dGEpTwaFUgyJ9vGQ==","shasum":"d76569b1486d14863d1b0ea96ac74ad8d12c3d5e","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.d0af8ba3.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoDCRA9TVsSAnZWagAA+8sP/1WtBVdxNVEZRJy2j75q\nsWfQ6t6AvIJWSHuF3JFQhqkAVdYydF2IG2UCnIKVr5R6g1AXemaELYyQEhDx\nzZvLLrFdDOBuqgU9BUE4IGWjuINUc36bnlUuXjLETcPampk7H5LfMTJHvBIC\nUAfhN80iHpp4n18tzrvzuGr7p9kT2if8sBkCj+pBZMRjzywhpnoE42kFuzGl\nyN3MRabFSIhITaU59qmxv4pnfftKFbAgUP+YxqiAqtW31pZpc6GuORSTC5uK\nBtkZbayi0Yz9dAS9YGkj+cvZk9CIzwtj4/ISnnlkVsuAbboYKMTSAJGj1Qmo\nYlxCDiWdYisgypW9w5OW/GUWWawms0HYLQ60HxCPv6iSsNPVfxYr06Bz3YAm\n4fKuo9SokFUcQd6VrVy8dciEiWuyU0NCPwyFOnncs1CtJKKPTgLimUwF2hS/\ne+AuUFpovx2CSCUe4ZwlndIoUS/N9RLaxIV/HTssZuYLVcYBuV3EDTIB/5Ka\ns7uvULVrPPj/BWhxAe4e9mRejAzhCU31CSK5pRCzsPFz2UZDyc6Olsnesa0Z\nM/QgJo/VMOSBuZQGz/7w0yqkcrgDUD+jIyLk2iP2QQ3hAydrF1TmGqos+ZB3\nfnEFaQcq28A+9kOwpdau9FMdRQRcThDEKb9eeEDVDFRnbiNyUtqvdQU9R10P\nB/q5\r\n=BSFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKgw/XRd0kuLSfGTmEgZeaTkFmWRRdIrgcXnuqzj3P2AiAICYf4tjJZtkBuFMrntpfbfKEbfLx/d913CeC4XoUWUw=="}]},"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-textfield_0.15.0-canary.d0af8ba3.0_1587665410573_0.8252429534325239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-floating-label":"0.15.0-canary.8872b17b.0","@material/mwc-icon":"0.15.0-canary.8872b17b.0","@material/mwc-line-ripple":"0.15.0-canary.8872b17b.0","@material/mwc-notched-outline":"0.15.0-canary.8872b17b.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XRvSILyspK3J8fiT2c5u6Oz3XZkQsoDV7Lvw9wqYM3LfpkmITIhE+GWSixnmH5Us53DRkUQCtetjQqwIjNuqXg==","shasum":"50b4466752b29aaa221642710476c63e453fcebd","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.8872b17b.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1bCRA9TVsSAnZWagAA6TMP/23fMilcjTtK63/rm1GY\nlTAuWEw80vhHUBM1c5OZZpIkYeb5uLLYJmgsla2OzSmuWJczdtq3UYSwl0tm\nXqq11TV7/R/XBBc3KeX5+X1VdEAg77bCnoqi4eiTDWfe5lnMd6HUTxgidq0H\ncys7UW5WTSHt4YyYUIzHBjvec3AnmTFKv3sy4pvkIk4pTuRbXJl9+VHjeIvn\nMa+G/RgJ254OdN56dPcNNokPWRiDPiqC2h7vP+VmDluMejLiivrlsCclJl+s\nl75u2WXHJHdbXA1PINydyVX2xovidAYJUQ8aGHOQFUxx5sQA2J9mYaJMsYIx\n8EGEaaGXOOfcAMP4EFQjtoRYIippO4rF4lg0QkHI/OXGgF/26rCX11HMNuFq\n/b0ydWWCmXNbQPlnyIFxa6JjpguIgFNgpYBBlNqoHyNSTIzJlk+r3T20X8nY\nUsV5eB8hbEkSZyxA7nog82jS3X6LFSiKyEHG59j9NgHR38EIqGKTNAy+3fTg\nDy+KnDAywsokCpNXFsWQ3W4uX37x7VZg9LUy+OjlBnrukVIO+4ibtlKIHrlu\nCIMuS5ssVP+nim3yIiC4Pe/96O+0PMo6lcv6uiHvDus9bJqME2qKTr8WYd5/\nRYIXTJN9BJmFMWKoEqKTnNGxJ5Bc4mUksMU3DKcIDk1sDZNJhgG6wA2s5V8N\nPA7P\r\n=8+9L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASidRkt86Cys7Gp3rhWAirutha2npso0xNP8zl+ybhrAiEA27FIz0u9C1tWWjiugxf/zhcBamiACh1ChwQ4CGpu2CY="}]},"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-textfield_0.15.0-canary.8872b17b.0_1587674459068_0.4825687716871294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-floating-label":"0.15.0-canary.eca1a610.0","@material/mwc-icon":"0.15.0-canary.eca1a610.0","@material/mwc-line-ripple":"0.15.0-canary.eca1a610.0","@material/mwc-notched-outline":"0.15.0-canary.eca1a610.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yprGFNnnaqaRLA21mq6TzGOKGxPZhX7umBPiqGT1plS5YsI5z6GEHic5n9TFkYF1hZhlLcJd24E+PnpBwV2JEg==","shasum":"b02aecc3915a9bd1b36ae50e07a0a0e6269eb680","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.eca1a610.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvjCRA9TVsSAnZWagAAOIkP/1rS7n7psOZZUjN85p0T\nE5qWpcAuxm984E7088yxOJTxVwoDB0wsMradx6f832FUDk7K92og2wHkVWYU\n3Sz16tqIyi5pqmuJC7F0e6KTGVMW3mdP+lN1pX1WNEXT77DAB3/My8ZRre+n\nUUYPkci6pJAUeu+/CmeejJYl+QkEPoaUEezzke0lzhfemIbXEBGXF0UNgBB8\n0Df23F8n3SB6pRH+6rfPiEx0ST5fVi/hdEMsyH45kWgjkS1/zO54T3GsROsu\nZlH9l9wm+Ng+o157l7AncOmLkBpdI5eRaYyqkmVWLGZ2r907D7RVdKWSzqWU\n3CcVCO+5IxHHIb9jnuNSfcncvAhJNBgL42Z6BQdWddW7wV39RA9nx1KYlTlh\nYEl/1UNKg/owwyW6qfxbvfyqZ7ikv0PjK6+VMVuOeKsxxqsj/bJtZU6E/HcS\naAGNRr/uJA5PwMVb4lXDH/v3D9+UlyZgfMHHc+11lcLREez8kxoZhOXAQPwV\n88+3LvdIpi4BhLVx0JhOnXn4P9kNYBzbqj+xT8eBT76JKb8q8yKPImKhAQLz\nAs1wbVTkHroX9fTCroaScSKKalnNfjPqJD9Clofw8pQXUfTiPLEn65D5J0q3\nFeAjlwzJigPh9lu9LBUMIUWR9vD5PNyKBivJz+UVwJtTptC48ZPj2Ik62od+\n6mFF\r\n=CXgt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9OTke72MMjR5m8ldOHRTOQ0uktZRC3KIyKroEcGUSawIhAL94H8ngnfD9GIV6mQpEEZxTxMJxu/u08wgKK6I06KBk"}]},"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-textfield_0.15.0-canary.eca1a610.0_1587678178578_0.27431770928057353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-floating-label":"0.15.0-canary.baaf529e.0","@material/mwc-icon":"0.15.0-canary.baaf529e.0","@material/mwc-line-ripple":"0.15.0-canary.baaf529e.0","@material/mwc-notched-outline":"0.15.0-canary.baaf529e.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-noTNYmMXxR4PhCjd+HSmdIgFwwIzt9r5zvoev/3CZH6r0f8M9HRtKt/2LNTt5lGITyZ2zkCNA+r8uPpLD3aX/Q==","shasum":"434c314cbd4ea745a6e49a7da029be686cf4a25e","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.baaf529e.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoho+CRA9TVsSAnZWagAA8AEP/RLqBdMcEFVjutQ9geEN\nMSdE9jlIrOC+8bie78mF4moF/RXTR93EDHIQm9TVLCzXYPFOw6uwymkKhcnn\nN/FfhYg0UZvZbySE2o8vnI0mQbmpP4hImIiVf04Ylp8IprlgGVoi6IpPykn6\nCQ/VzPKd5/+xDiFYcQJBPuUzFdfjvcmRZ+hDV+tnbbZuci98bC/KwVR6rPzs\nxq+u+SF2N5Gh5zOiNKoBvI8GlPqwbf1/Hyfv56lyfPGNlVe1GqgPS8eDUfKK\nK+aj6Z6GZDrmypozIm2OptGWWtu5E6B9xfuHDl9oYc759/B5YauIRk8/lG3R\nTn5u5sR8qrWp4y+kSLnopMy4MLqTXGjj+0gSGiCbq2Ri72jZlGyaCP17FVYF\nuNIsIhFnu+DhTYCtiznfKTZ7cPG3w/xhllYd4D/JbwVSCPTjON0m9nro0lu7\nCWOHf0YTKw6R8rya6IZb1tu7tUYQS+u91r32ZomIf1bsDGQ0LD304W2gjsml\nVJS39xD2H0wQwjnHrbfGSLqSoNa+08vMlkpsRAo9YNwF4xre2LKNzFdjizFh\nPcppVXCps0YdQyHQv3t+kNUHmEqRB8Aivv5yOKB85qwt7Zgj3xs3NCPnmB/Z\nRRiVDt+J/iCCspPnWsgEGE6btMPc5rkSpFJTgAAE9RZkYKJoa1A0bdhoZLhb\ns7Sn\r\n=F87v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7KZPGqn8HZyKW33eGqAoQAmL6D32KA6VngNn6iQ+0CAIgCWD4PFOPvmlurtZBFElmd7ZC+gzJAz8aWPuvgliKjHw="}]},"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-textfield_0.15.0-canary.baaf529e.0_1587681853582_0.6761701455959326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-floating-label":"0.15.0-canary.7a7992a8.0","@material/mwc-icon":"0.15.0-canary.7a7992a8.0","@material/mwc-line-ripple":"0.15.0-canary.7a7992a8.0","@material/mwc-notched-outline":"0.15.0-canary.7a7992a8.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-baSO/CoBg5Jtaje8x69CIhgiQgAHPZG2e+PijbkI9QCxyK+vfQaYLsPtwZPet8LZR0g+aMBc2sO2g3Hyew5+cA==","shasum":"16e7ebec687af842d05e48fae9747d7551b5f12f","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.7a7992a8.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFBCRA9TVsSAnZWagAALBIP/iXFfrkxkboxyRNRqTHM\nKZu6W2RbaOZZ6fCMs8pu0OgQiuiI28X6aA2oSXggUyRvyQxYCoR3LQa82LwL\nF/vthk1sqfBVVYxb5rMzBMtAk0OugcnhIyYLI+YSA/NoA5IiDFBopUNdl9ae\nLMv/PRD+jMsG44KYAU+vgqMZJfdJzxDVKCFogJLKrsuac5NMZ2CvrcO0J1oF\n2lFlvwMszycTcxDBD5/efCvWaazJjpaGbfqc3IGKlE5oirqqy+9a0ksrgSZk\nS0chuLOtgPBNdWsPVwe4d47SMsbuA5Oz52ZBr6fx9ENWDZaBK499TgrVKRDA\nmDutgToxSZ+UO4/JEK/nBIhNfjfacsMR01cDOcGwJ0Miu8cntmP3My301iS1\nS89wEeC95tu0Jt7H0vujvaieZqrBApJwYrLYT2D/9jz2jE5p0mDU3ndyToR4\nxiFiy87Bx9Blga7BioP3In+YfmskdwWFvUFm5kBpHAuoBhVVHWeQZXwnoOj6\nzJ+yVL+GmMNcw3fz0hqMhUJFy8kaU75c20lzIR8iqjnDGto9HD4s1sWBw/0G\nzTpEljQsQwVDqo7ZXCdJvnBHu6yHN/Np4hxL/gxecyaNV06WPaV+WfesUhKR\nvzgexZh2Kmyay2YWDxZnGza9549l5nxQquy1CUV3skbEY2hDPpdtxbVhUU7m\n4pRc\r\n=zag/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHp3yZ1/pubHLQMrFQ8itmynmnKpKQ7DcdBZ29qFU4dQIhAJd0gm9T10WBHXogX9CGtZzsJCBhIkkaUHNVX18DhGRw"}]},"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-textfield_0.15.0-canary.7a7992a8.0_1587683648958_0.07935486519389734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-floating-label":"0.15.0-canary.1150d64d.0","@material/mwc-icon":"0.15.0-canary.1150d64d.0","@material/mwc-line-ripple":"0.15.0-canary.1150d64d.0","@material/mwc-notched-outline":"0.15.0-canary.1150d64d.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-P19ZstSj3jzKd+G5cJQUwMtiP/NhkICJqthgFLSCKCnKdEFckC+OOFnRKAB6GzSfwpquK3qfmeR+FnFW/9971A==","shasum":"56322f376fb87af4a2adc33bfa6da1f42797ae26","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.1150d64d.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBdCRA9TVsSAnZWagAA4uUP/iRqsXya6ci+lOmmEzxS\n7PmY8Vh4bIMmMt2AKCyCL6b8gyjiT7GELyDgl8YnKeieM73Ns62YS0TgDMUo\nTCqKjy8HpDBVavtVn1y1RwzoYySJKLAfOKMlQcvmBMJ8zJVC45kaoQbjMCpC\nvIJwZHn2GKSh56RFPf+IrOj9152b9hJRofFE9WIdpjqD5y+u6s0xtOAKc03v\npDLWQEcLz1TAYUXC0tAetDjUkFIT9kQi/Ph/F83tTOM+tRRQux4D5Kluappx\njEdjU1wy6wsdC908kyyJQSQg22d7+d4OG+9ZU3F5PICB6QBTKChJtBbXdyhG\nPISwZujQiIDZDSidXRuK8N/rF+u3fHbxXB1bddPkgCKu5lIcDlpHaOj2Nwr4\neTFM9oWGupAZMH7faC2OfRWuoXsZCbersCES415j4AMGXzut1ZoUJskqQ/7b\nlrfxT4rjSJVu+41cjTuV2ZTxoj+aEBiRvyMw/b2+WNjF+DdsWQY+LWiF5gjB\njouNr/Q7MP9LReYTNA5sqYhy92Cu9lpwrMaaNvJEVu7GFh6F0704LrI1YYF0\nK6iaQ+Urr4lTUZs70qhoOyzaddItnxz/zfDyORdyo8NU/5R38MnyJlCbF2xb\nI+SJF8SrM4w4f9kuD6hAlnAxXpJUXuWgwLTgNIHvxkYdE6bEEoQEEqwOFJU0\n0SOC\r\n=X4B9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2Jc5PG4FnWIxdpKUVyibKz3sw/8KEHOlucoMhmRLi/AiEAwTw7Pw2mAPeZfysNu2G+hMBYVL0WI+LxMQ5H0efQfqM="}]},"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-textfield_0.15.0-canary.1150d64d.0_1587687517534_0.9209397728496145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-floating-label":"0.15.0-canary.dad3f828.0","@material/mwc-icon":"0.15.0-canary.dad3f828.0","@material/mwc-line-ripple":"0.15.0-canary.dad3f828.0","@material/mwc-notched-outline":"0.15.0-canary.dad3f828.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SRcwZrdLYxpeGuxPhHf69LhqwuRiOCOmQt6SzVMjKuc9agZnCzbzZt/cTxdJTyLYLaOAqJo4FUC35uiBcssjoA==","shasum":"d7038f22d242091edf3ff01ba825c22315f1aff1","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.dad3f828.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eFCRA9TVsSAnZWagAA6dcP/jiMI8hLfs6Eg2dIlV33\npfQIWgevUKw4cnTOZs8guI6H5bTcvV6FyU593ZeSU3L3aTrbpSH5HUvYayW9\nkO1WSOQ1jrN2V3mKxmXd356oi6tgXV9tP2NYiMiW/PD6mHHChpRyrBXmbM5D\n+0JM2WHT4l7WJP9B8S9HVe0z4QwU7gGfMEx0brzaQFlP+4BV7FANX2UAOfmf\ncpL5SJOrLlKCfzdAAjT2R+/0gXN5L9fiGSdM+LDwq7ttV13aedRT8ieMllqT\nSmBZE9gYJMvsTSJwl4CZhVfwYpnEpbLicQYM8DiV1/3ZnjF2806QY4roc8VM\njG47eqP40qS1C93bCl/OyzmvyPV2qBnEqjSwWSlmmGJrv7kozPubE+QAZE0L\ncPe80yJjAvnuYCDyRBPPX6WDASw2X05JnnAyAHLVE5C1h/IJ6yh+jwR6RbbR\nH4YM6Q6lwZxsxuGh2YfdV9vxRr1mjqHDwNj/D7wCh5ufVrPZQgIw2E28Oh/b\nHo/NvQfzlKyZfJJ4HKjvywQLe26MyFulRTyU6RqKLf17Iin1xN2742oKbeK+\nsdFvFPJBq00bKRrR3WyMYUR3F64PnxgFAcTul4H2PncGHebWFoNRI4T7sGQr\nJu1jkYvNN/YKfkYMP6wjSpsFknmnF8qGvix+IX2V2RqyRjEbc3hsFuMmyNDp\nEau/\r\n=hB0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhcmN+veebjFclqQjQiSH66Qg561yqcPds+1jrqt3vaQIgaPlCmFooUHs0hUkPUY6c+Rl+5FKOxwJxJ3RvKe9fF8Y="}]},"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-textfield_0.15.0-canary.dad3f828.0_1587775364783_0.6444865092876408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-floating-label":"0.15.0-canary.1bcdb47e.0","@material/mwc-icon":"0.15.0-canary.1bcdb47e.0","@material/mwc-line-ripple":"0.15.0-canary.1bcdb47e.0","@material/mwc-notched-outline":"0.15.0-canary.1bcdb47e.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5zsLaJvqah1fQA0Kb8bR2TkTHyAsne5gLsCyZrwd8xfC4L8BEs0wwMMZMdjChJJ9IQrDUuawqZGx0+FX3TogyQ==","shasum":"e02927477612d8ec8b82aad0e75825bee9b6a9e0","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.1bcdb47e.0.tgz","fileCount":20,"unpackedSize":263689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MVCRA9TVsSAnZWagAAKb8P/3a4tUoy2Fz1HzKoBsNd\nZ2ztK0DdxRpafeGcxIzSlIGpPKm6Go6U1flOABYnSxGp4CrrfpT14niLnKOf\nXsy3w3uusBAU8x5vfu/PvjPyvDYzsBc6jVX62fHQ+z0JYzykphNfkft3UVeV\nuAQszB1/Qp1sLBbUF5zVrt+IwtY5W7FTBCSWnzjB5nUdMn+/jYF3+MVJxJVW\nP9SiyK8gtIqaXPT45RdbkEJojk88wQEyT0TkKsAqP1qpgL645S1IGMTEBarD\nljlc3sbehQXXrDo4XS+pGZ5oFc9J1IPSoFzI84ouI7hG9VmGp8LllqGqdW+S\nTyaFpIM2PXw9aglbkffpM4tfZ81jeqQd0K6rB/Bxw/QZy5nuFmbURFk2UoYP\nBIP8cSdVJ6/lz83Pq2k25ujTaBKcfBxpdMVgL5x1BG1cdIdVJf6kO6hVVnQo\n8zMnR1RgKpt9mjkvyBMWviZ8SGifVbFPQVtrcoxZK/0ksF/2mGot9uIdhfOK\nP7ReLcbpXkmweFco1WK3rdbUAhnF7ranuXxh0sv5JJFAM7VuVbg5LaIUA6Y8\ngDzbdDXb7EmoGhvbKG8vBGLeSg6QSmXqYfER1q7palS303fxad5nbW2V5R73\nO0puajQltbNcSXYLcWS+LKDPaqsG7XdeMjr6yIGZjEOpfQwF0FZcvAC94GOt\ntJ0q\r\n=Y7OG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6LdOBzPDPOsjnGLhS1PiDItnoi1UEQX7D/+md7aDBUwIgdS5I5n6z0VnvJ7fIbFbj4qwSPoivpeih7bCATmvwk80="}]},"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-textfield_0.15.0-canary.1bcdb47e.0_1588036373211_0.848349474336461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8540808be.0","@material/line-ripple":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-floating-label":"0.15.0-canary.86ff1b9f.0","@material/mwc-icon":"0.15.0-canary.86ff1b9f.0","@material/mwc-line-ripple":"0.15.0-canary.86ff1b9f.0","@material/mwc-notched-outline":"0.15.0-canary.86ff1b9f.0","@material/shape":"=7.0.0-canary.8540808be.0","@material/textfield":"=7.0.0-canary.8540808be.0","@material/theme":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-grrw2oc+j8tAYveQS470WRmZnmh0aLDR8l6ZHHUvkXyb1YlS/lbZN56JzYbEo4htiXidmJc1IEuUvxgLhHj6OQ==","shasum":"b75a3fc2a3f602dc4466a619101dde808cf513d6","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":251536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5svCRA9TVsSAnZWagAA62gP/0txPypLZ75Hh3xJVPeY\nV0myPSlIRnKIo5sX+uufJtK2icwg6PLgKzGVitQegUmp01iBbNbqqGzduld/\nUfEqOq0XF3K3WRm52cuy7wuvDLAZ1T8gRCV1BW9iPYCaRxZl9Z71cSoWV+qN\nwARvptfA3iBc7caiXotx6LS4dWqnax9gvHRmU6t7/NxKdn0rjyd4zPLPukmJ\n7ihbFMlIlPb0gvn1bqHhp7ZkAEbvw9RnZbsbrIYzWfQxcNOp0YW/hlatMJk0\ngjp0ky1FQ76JHNmTRhZq5bNt36jFNq4JUCJfCodyWbacm96F3mpNWSm/k5MB\nJCXpHM0XEvh6znCN5MWRBnzutqAfyv6GFQazHdUXKmcKvHG5mnucUW4LNV4q\n22gHRMbB1yReUi7eWzZGyp4zgePu9A6FrFPCdjNY3ArBEZ7P8T297HvItd60\nmQ7744DUHovouhGSNVqv/X/HwH5CHDfNXvcxeKZ9B46gi+cMVHwIwlsTHtc7\ncfx2m0+CSHp1g2C902zNkvabpbyUMVCpyhtcXx3YwAeDWOHw9QAUeGsiac3S\n4W3B40MXYi+JAZF6gRZDN34rSzwzUpklL7AttufE5NYcNK3mjInlA9FzIEtA\nPYEH8sFkKemmekKBywWZcAiLPM6h4+i2HwtDXcO3F496q+GxPyUV8BffIDqM\n/HqU\r\n=RHtm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLFGw/QFqnG+Km7bvnSaL4K3Vw60RiLwOWzPbBirKMtAIhANbW7cEyRwPg0QJapw0l3JDgEFn0vasH5H+vJrAOLnXm"}]},"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-textfield_0.15.0-canary.86ff1b9f.0_1588042543058_0.7296385057034274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-floating-label":"0.15.0-canary.54a86b20.0","@material/mwc-icon":"0.15.0-canary.54a86b20.0","@material/mwc-line-ripple":"0.15.0-canary.54a86b20.0","@material/mwc-notched-outline":"0.15.0-canary.54a86b20.0","@material/shape":"=7.0.0-canary.28d32f8e0.0","@material/textfield":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1UL7seMy0+XXEXbOGDmgf3EdRZSMp+xlA/8kTOnEnoQb3qvrvoe3BvW/ZLwAogmooG02yTGuxkdzKAho5cWrNQ==","shasum":"c73baf4ae2fb7ce53334478e76c52a1d47f87afc","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BoCRA9TVsSAnZWagAATf4P/2d9OvJfVYyZ32k+Pqkc\nmcqINjxDhxFZsfED9/9SkDzxee7ythyDR/oC0YnOqkwNtT4l7nd+n8y+q+3K\nyAVLeVwztCHEBE9Kb+R9adaVWe+ChanEZB67QcKSdfNuLXesRHBr9/pVisMW\ngEIDh9zBDuCGtOyVc1WJq5ELLFl953sPZTAR/FP795n6rwjVnB6gq6BdXRyZ\nZ7/+Y028BS4SsIx9BqzME9eolbwlQ/GmpI9obfMEv2LDNf06Tns7qebvOMpR\nBge0oj3aP35u6KSlpuFzbodLQkVURdRo5KglirmAPwPL5V5OlLN10zWWCyf2\n0nz5F64PhSE/PsTm0i9w08y/lhhfHj19ra6o4hv0ftNFWHZflCiKUDDkyKkk\nyw8lff5U1EeLvV2hrg5ForaQPAPZwXRUsrRq0ByqNfwwhWafO11oZBfUHgD7\n/R0+L9FyTy99NIMb6lZ4Vp1C/NlAbpa5fMTu9pLOv0L+CLL2gBiientwjDNl\nK84VsBn9l3XImoQSATaeMzE3cAunnherrTfEcZpMRjFGcEXobBA3bFiW0GnQ\nueVKF+fIYtNtW9CKqX3HtPFknhoxDWxN8SRD2NnH/jpHEMo0NN2tzdyG4dE2\nIF0KeqZs2oO+ZuBAMXz/xMo4DNSFU7npkq/LfL9LsMM6IB07IyJo5F5zR/9x\n7hjp\r\n=87Q0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKeDQz0C1ZZdrE59VRrY9/ILBoSB473HC6KtUVLAI0fQIhALSNJsngQ6ehPsED5uIjVaU/kIUR5KqF7eTHsrzExR0X"}]},"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-textfield_0.15.0-canary.54a86b20.0_1588043880336_0.40373948911916524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-floating-label":"0.15.0-canary.938fd24b.0","@material/mwc-icon":"0.15.0-canary.938fd24b.0","@material/mwc-line-ripple":"0.15.0-canary.938fd24b.0","@material/mwc-notched-outline":"0.15.0-canary.938fd24b.0","@material/shape":"=7.0.0-canary.28d32f8e0.0","@material/textfield":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AsAAfSflAwQGu6pVCkcchuGu0Jw2uQRJf5pfCkKR1WcWcqG0Lgs804Qcf9POO9nAQoHDa2/kO5zg2KhrEGSPjg==","shasum":"4aa96789e1fb0393afabfbe6859d9d41e531bd6c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilvCRA9TVsSAnZWagAAw9YQAIt+Ahe5PSWfZD9uJlRV\n/xfuS6ID5Waw/vtdikm10bH4ImKbxB/Mtvd0aaPupiCc0cYsK+MTusoyYG0z\n0YV6Ryr5dItw97dIdFGMF6eW/yXaPcrX/hkBKZb5s8buKb1Gm+MnSgX40TDF\nOhyoDqBOgkb6PoTHgKPzajQzsy1IgbN7fKq6uVENfhsjIZLAQOZ0zbjVZCEc\nzNJp7gRjYcZOo3LPT+aoAVLDyXgIY6VeSP2UzfiefGCmozoO1Q5hESePFUkX\neY7h4GknwbubZ+uWqLFyitEj5SprBRnLSleQCOiABSSVjvad7In08vU2Sr4k\nm86A7ee4ryfLv4FfNiC0SEbUurw5qBYaHTMX+23CbqcK7mE6hQJEIeXfTZRN\nHFAoshN5wheeu/UxVC5+4l1wo0hlxWY5p4eGABuePATqgASzB7R4QaNiQbrD\noC4d68kZ8rBEpQtmy60qKe+RySqumKxa7RgQy08IlCOxUrqztcZ8EOduGv7e\nfj5qspKK4/hWTv4uAsz0N0uoLSFEEIXs0lsR4DR8yMCGRV9AJrDt5eBZp06b\nSkWcbPQO/JEionOyWBZ1KV6smGngKBwEjsbc3CMB52jbJP2wNcDDwiDQpaHO\nobCPL0piRLUAv3E0OeWbkhqKGKi7tCQBIPF66D1x1mIrp7h5omCVpQ6jlnhg\nFS83\r\n=g8wF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtccYEZw7srB7IPJJ4aXANhJBWzsjAEQOlCs4DxYOG8AiEAgG8wSaukAQlFR+qMbEs7iAc+sBAa/xszJYMsrl+SWVQ="}]},"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-textfield_0.15.0-canary.938fd24b.0_1588210030947_0.24912198969360588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-floating-label":"0.15.0-canary.39e9a008.0","@material/mwc-icon":"0.15.0-canary.39e9a008.0","@material/mwc-line-ripple":"0.15.0-canary.39e9a008.0","@material/mwc-notched-outline":"0.15.0-canary.39e9a008.0","@material/shape":"=7.0.0-canary.28d32f8e0.0","@material/textfield":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ybl/Ip6sof60/kbF4C0fCpTGgfXeFTxcP+tpn7U44G6qnbjA1iutotOB2d+Qn4t69wt5HAX7Pe5Sp40SagJRHQ==","shasum":"5e3c455f584c0bdd8dcd36b63cc2694dade0645e","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRUCRA9TVsSAnZWagAAQnkQAKN/7mLAPJjirzB2H98n\nOT5oLiYgXnbIYSZJcdk7pCEXe1PVhxks5jKl0SW1pFWTGmX/N99NaEpNt723\nyDBnww9Hy0wyLFNeovkrO8dQx1DyP++5gW6mc6UzThM/LrbZ+WZPgxLsYOyc\n2jTW4K90sVOrITkQ+R1Ih8xYaywWkabEtBpcgZ5ZvqNQOnYg0OYGHPjyJgfX\nadZ4b6Ky1Jr3qJfpKMziVdmMTS1AoJjHniJC44RAH+G9ectIDAO9YiImH3RP\nvWmf+gBf4CqipxZUUMx/Mzi+KxaO2bYUJ+a3xH+VYd+5DVIUIZiFS90Gh0JB\nL/r18lpFjkw/FcE5MgPMzQMquGfcotPPl8hNc+DZL1gpQixAXTxrftM4jYCR\nT+k7Tsx/+K9Fmom7cGjCdFgnT7KGz40XnteAqHiSJmG/iEWqgY35rK86J0RB\nlqzPE//8NwmyiuiwARgpCCHmv43EjbAwyMgIl2xIz2NzjmIGwaDQeSzd7aWi\nO0/yClgOYZJcgmwMw5DdTbc7pd9rEtQbIHT/AGDimoW/Ru3srpoS/qHQGJJV\n6ZoyxrD+2A2NQQsyiieMfbuO8joYua+5CoGPbuIX9fAtiFtJq8sldhbKjORO\nbQU+Opc1uIcQ6sfOs3umzErTckrqnWhOIzBSVPi9vDxyh4lHjUFlcBKCme0G\ngt7O\r\n=ZRHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjONNU/xpxdmqJ4hgWHxUkxBNfGJnz+2jyFCckvLmZhgIhAPLvgPYiZkjyt9g4G3wmQlhdlTMRBpKCkk8R+KIF+zSl"}]},"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-textfield_0.15.0-canary.39e9a008.0_1588212820594_0.6765971395831458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.28d32f8e0.0","@material/line-ripple":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-floating-label":"0.15.0-canary.f3b365de.0","@material/mwc-icon":"0.15.0-canary.f3b365de.0","@material/mwc-line-ripple":"0.15.0-canary.f3b365de.0","@material/mwc-notched-outline":"0.15.0-canary.f3b365de.0","@material/shape":"=7.0.0-canary.28d32f8e0.0","@material/textfield":"=7.0.0-canary.28d32f8e0.0","@material/theme":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9Ic+z9ZK2BLjBlxorIgCIvKG7SUxVWvC8G0k31DGcT22JRYGCsT/O3AKvULw6KK9HrEIY2oYqimlMgDqp8PSPA==","shasum":"61de825e7c3424844a06f390b8776ad317e13f19","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovgCRA9TVsSAnZWagAANmMQAJPDmPNNBHc4AV3h0IPm\niJ4048wb1p43dJGgrjOA6iF0jmIHV/Rs/RYoubcYiMTDMFdmGWvIlIHKdILh\nRSyrjO5Ccjjfmm9AMg9YqVXSKZdpfVyKu71N0jkhAqtWGasWX+XSLMwMaf2z\nCVW0vu2/00KKhPgzpm8Tm+Y9g6b9zT/woJZCqk05Ei6ZkdcZ7IAHNWjTzcCI\nmK1khR9kxhund5IADAOcJiBz1hVzX010rHJ+n7GNVV+xbO/FZBahFl/HfR/8\nqV9nQiWgW1vRavIcicFPFFcS55PHpuLsI759/vu0EROgj1UcEbyiEbt6n0RI\nwwpijviS3Pq6oqBC+JDITzKHPITeD4m1HfEQJdt7hDyuW704lheLhwBS0eDr\n029yPK3sTKttVCB0ZYeQQpQ6SIJ5BbBayQf9HG0cQeteKn7ehEOR/DjychVf\nbMdx/nk2g4K9pr4QtdOHdap4XjjTmW8t3N9kaECMAgX/qBzxyIOSWqr78MA2\n/HsR8uz73bQHCbYaKwXwXdQwk4eGgSs4QbXzHfX6uPsok5RdXoNRDLfGVDhF\nd4S6CFM0nXjyo3b6M3Q/1Ru6pSbOpvhWpAcCyHZEKeuqrJO1eF5htbfz3Qow\ndKzXVFmzlnb6yJGlikMX48iqDe7hGEwrorgAu94QSTS8eQfc9i51ubT543kC\nH0zU\r\n=05Yk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWkyDdkS/BYsP977DWvm0b4j3i2VdS77zREoJo3U1w9AiBOaCzxCE/4idrh78znjOR+X8jYOLPllPSDInnsMmstuA=="}]},"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-textfield_0.15.0-canary.f3b365de.0_1588235232029_0.16584402005601429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.b0f83d2fd.0","@material/line-ripple":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-floating-label":"0.15.0-canary.cdbdf807.0","@material/mwc-icon":"0.15.0-canary.cdbdf807.0","@material/mwc-line-ripple":"0.15.0-canary.cdbdf807.0","@material/mwc-notched-outline":"0.15.0-canary.cdbdf807.0","@material/shape":"=7.0.0-canary.b0f83d2fd.0","@material/textfield":"=7.0.0-canary.b0f83d2fd.0","@material/theme":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0G1hFGDj3R17dl/6a0/gXEZts4NV41j63Rrtp1n5gmbiDQMMk3loCAukI13Rqe5hfWnMuQkVJVq3tPJJxYjtfQ==","shasum":"b553ab4a1ce42081c1d34d9ae45402d1b4b3285d","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2nzCRA9TVsSAnZWagAAJ78QAKAtQ03IAfZsHwOETkj+\ng/QYuG4WAqsW1W4GUsVpIqTOYndBzLz6njJHWY1GU88HzWms/Fw2eBEZgi4u\ndfDzSu8lCxyO7NC8zZzP2K8bC3Z9XdnsNIDjMHIBj7kFyI3OK6Z5F3D24IcN\nkZ+hE5mzZuj23WFVedTb/vqLqDG5unF85mfyFz5f5DhjH2pnq8PTnrjrLhF3\naLOUHYS4QAsRmpm/60V9RWoWOxZQL0czZ09UxszFFs2qSo5KYb0Lp4cDD5jh\nXtEk0h467muNbGjeh5zwlhfCHIoQ6VqrxWRpZLppugGsUzQ0f20NA+FkXqiM\nTDGQNwMB3el0hP3Amh9JayGgLWKxPPPWxbjs2VZJueJ16uZ0PJwDj07Xx9ou\n9puJyo+vDhOv2jvseX1A8dVee776QfJ9+GIX30g6cBpam3MPB1jq9zwI5+sw\nGsj6/dlp2u8zSsRfgp2BEMQalJbD+DsAQJN2n7EWvrZIpFwpPjUXARy7aAUb\n6CwIfASeg7n7GA29S/0nvQn0XTZkYhdULt2yVrc7Yix8M+g/Vb+FTApbV77c\nWEN6QEZgl0ivePWQh7N4EGUzlJG63uSmmOGb0WbMJFQf2f0zJgq5mi2+qpF1\nRy034H3FDlLB8N+Kn7d33W+TwVBP6A7nDYlTTYEGmjy02L3lYOclGPoiepcu\n1sit\r\n=stGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGbU7tOSI+MvZfhm+nTf0gP/ob9KXhrksEIa8+bsGMdAiEAixWqA6FaH8yAQP8e14I0DgRFHOIi6bxOsqShCauH0c4="}]},"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-textfield_0.15.0-canary.cdbdf807.0_1588292083417_0.23336351751320206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.e59906a57.0","@material/line-ripple":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-floating-label":"0.15.0-canary.9995ae17.0","@material/mwc-icon":"0.15.0-canary.9995ae17.0","@material/mwc-line-ripple":"0.15.0-canary.9995ae17.0","@material/mwc-notched-outline":"0.15.0-canary.9995ae17.0","@material/shape":"=7.0.0-canary.e59906a57.0","@material/textfield":"=7.0.0-canary.e59906a57.0","@material/theme":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZPpTl08Lls1N553Jf3F0fN1MhQ2V4wr17v6i8cbBAurEObXznB6LtZTjUeDKFrtCjCBYzUSiH8ShzCSr8B6zZg==","shasum":"74d96cb080cf3830356871194aed818e9ecad9bc","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG49CRA9TVsSAnZWagAAu0QQAItSKK6Zlpjcpd2mksqO\nnd76ikT6y+3hW9HdLQ/NAmtRL4cH7a7PiTogGqQZwkknOYJyBYaUJ5mcOejk\nUN/L+zWIO7DZ9MQYJJcxHKFf9dusYGQWehgPyGJOCweQMW5NrcueHA5zDI0x\n2DlbFk/Z1u6Z/e8mwZj7pwPZl0C8MEV4tjx321nffs39D8t1NfBMZbuZSVsx\nEsqYc/Q3Jj9voliEVKOsAWl0KG7SBV/dyGhApdulTOKHLdt/79EJdsxuwnTZ\nzkKUcArJU0jaRg6bc391SNZ1hkxBuUDDWud7wZCIZe0y8BTlIhj8jQDz4Bvv\neQ9tje2c6nKzie0cx+0ML21KtW4MKCklpCacCgQtLSn5cKoXq/uZZ2xvFBoh\njmbqSU4u0iCWRu91IzJUuReZPK/4NsVcdueMo1/zwfJc2nVKfwJLFrDgkdnr\nV71+SO/HK/59BxLMkV1B9xFffR6t/17f9iQ6uNd+oieANwb87W+r8lvopjYT\nLhADbIRRLjBOl3o3Axot7iRQgHiRubH/fX2KQNfP76ydFw5O4A+wCGkg3ePE\nRTqJN0TMM/CNSNFy3zLsJwpqcl0sUN4BJgLwCD4SgOAAyHFxGcSZyUfqa5hR\n7N9Qd+hz/RrBLs4tOtlBUFwLm3/KalLGx5DuxVnAYAjyPf453sLGN5j67Fm6\nkPpH\r\n=f6PC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdJqIOpv24z8LG5xy2KPkUz+AeIYKdnquugRRzkEimAgIgSssIIFF4lpQCIYiOhnVbOuPYFHhfSiaS1W0S3r4DGe0="}]},"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-textfield_0.15.0-canary.9995ae17.0_1588358716889_0.7557364613111763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-floating-label":"0.15.0-canary.457bf035.0","@material/mwc-icon":"0.15.0-canary.457bf035.0","@material/mwc-line-ripple":"0.15.0-canary.457bf035.0","@material/mwc-notched-outline":"0.15.0-canary.457bf035.0","@material/shape":"=7.0.0-canary.15d65448e.0","@material/textfield":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-81OzNtiJecMtLIc9mMizTQXGaHKH7Lh9Nlr8HuegiD/bI/hN3jgBW9VlBE1c6joRAopqOagZe2fSEUYaJDSECQ==","shasum":"0fbb44b4fb81a20a568240932e3c5d23cb097c83","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuqCRA9TVsSAnZWagAAdfEP/Rs2ETMGGMwKE51dtQf/\neldt+jyNsm+ERtIjlS8hBCeg631XomeN7Ls3GPYSi6XI0tAh6zmKontTLVkn\nmCpnkY63FxtUwUue+3hsFu3NllZ/8B9dRG7raavLDuTEr76wrYfauFUmIJhJ\nsK9V/VDwjsR9smV85sWiFa52isNBwnCDKpBRyolkKYDqziJz/09ozRJw3K9v\nifHf+lOVIdavaJrLWFTfC02UpBuSVLKtIHcT5AybJC1/AsMN2qAJm1mKBjSy\nDGKsvUteUcS1FIDqJ8IeTCfTeNjij4m1SpBijIqV8oQeHbpNI2HuWgM6Qz9r\nrfFA/1LVfONcJJFENLTenqa3u1vgEqv17YSNpeNn5T8ylsUO+X7seBwSAqoq\n8//02gLfIy+tHwNDVt04h0nhNqJHuj7NJRwFr4ySbTEtL2Z+21RMt2H0FgJ5\n4GRrsIsTCs5sDgQXuLlHFkcpE6IwlBcBEjxOsubnm3Pf4l9fLOaIzJ5GNbHv\noIoq0cK5DPlkVFpxAmHvryEz0IiB0iTMKdrJcPFhMQ3aWzM52+lmxV0KT15D\nULMqAFRA+0Ciorhhe/xb4IUkvYlTMvEdIw+Ya9dRMOHNnEtim+ae2TZp725q\nG2+QR2cNcW8E+TWWSz/lteHRYGly0lvdBksr/CERyry02N2MbkmTYqyMzrDL\nD24W\r\n=Eb0+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMYYFvqHw71bE7LWw80vqRpV42eNIvo/YFg9wwuXTo7AiEAiWB51cjqIXyP0HXZcSPqBQm9DN2Lb6quhfq3vkcyqKY="}]},"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-textfield_0.15.0-canary.457bf035.0_1588366249817_0.507729525234736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-floating-label":"0.15.0-canary.2381fd02.0","@material/mwc-icon":"0.15.0-canary.2381fd02.0","@material/mwc-line-ripple":"0.15.0-canary.2381fd02.0","@material/mwc-notched-outline":"0.15.0-canary.2381fd02.0","@material/shape":"=7.0.0-canary.15d65448e.0","@material/textfield":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hs4aIWYFIRREhykXh+93ZQse9PdcUseHhz1RAqrKNhNB35WcWKoaluEJJITkws6tj6AbRD+m32rEq0xxM3Fbbg==","shasum":"99c3122a6ee56141ffaf7c9a17bc8b476da21e2c","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPJCRA9TVsSAnZWagAAPtAP/0sRV03UdnXsDB0GwEiD\noQcIh48MQ/rqYXWDM6hltsIdkwEA0blh4HXcRjnSEZOlEDuKUO0nYpxhuywv\nFtFsXNJufTFlIlX18f70pEsLAJUH/aEdtNlsAtv8eZkL2zeC99uxyxnor6Xc\nTF6IMgKwFydvdJQgNAbiSJOW61/Dqu9mabumGvmaxgXU7k19hTidjjDWurtZ\nlxiHXe5pRL5B7IRZOipqwQdom5uTLc6UV0HFtsT3EKIoSC50AiRPFA7V+HFQ\nv4p4d4Q5ws8Z98j4zMgeJiq3UkN/soexTq/4Eik0TbXnb4YNPsOjtMWdPxSu\nMavy4+pshsLtSsbMvvBA+cJ804zpoNm/D+4Gi2o1edqT2LKX/dU6fIW+8UGq\nnaNVzrPSYH0cvjDkR0C5Fr5XC2s7SHM46DQ9k22POAarl+T4c6KaB7qSlq11\n1cV5JXlEk00IJY5o998fhLLbRq2HyeAElTqhS0gjsTJLhG/Wul1ReSsM/r9A\np7ibg2JwlnB2nLOq6Q1bv4oBognb1qm5AHpqMz1zHeLRjZnIuKLC/LTPDq9/\nco9w8bWjvPMmj8isETZX4JFNF4K1a1O9a42v6LeD2vuKF7t2Fz4hF6AvaGfi\nkQxBF2K/dUJF0NXf98YTFy0ggy5VTmwXibkyB+zWDOMLueAd6n13VtAtI9Q9\nTW5C\r\n=EB6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYjDXh/jqo+IMdhGaKIg1/t1G6sClmrOn1hOplguWbOwIgbBgpn7V3VV9gbxYzAOlfvNAIlnUT57QkIAF8gVlHRmc="}]},"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-textfield_0.15.0-canary.2381fd02.0_1588368328923_0.762040486606286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-floating-label":"0.15.0-canary.b2ca9b57.0","@material/mwc-icon":"0.15.0-canary.b2ca9b57.0","@material/mwc-line-ripple":"0.15.0-canary.b2ca9b57.0","@material/mwc-notched-outline":"0.15.0-canary.b2ca9b57.0","@material/shape":"=7.0.0-canary.15d65448e.0","@material/textfield":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ahjRpZxnXPGUetppL5asQzE8lgeccm/QnaLBdmg/4Y+gi9urLqsRejwasCRop+llqOs2VZ3cXq1GqSLoTaASJQ==","shasum":"3f1c1478216f8e2432547d495f2987f9dd0e9120","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZUCRA9TVsSAnZWagAAMZEP/0qBC+Dub5lda9+vzDzj\n2mRpLRGWuz3Li/J5Pf46NC7QPoayfcWBw3Z6NAqrUWZ1OTb97gR+Q7mOA+j7\n9SI/ec38CEmtskWuHAsj9G0XBSAe8pzONvXEqpORfondkOG1pE0kFwQGkNau\nEIgWnrMP2TtG/L6UUOSZiyC932cjfFyGSRUi5pAu8V1dQBcFqF7KFHCdBsKw\nW70RjeDFlPgBMlqi69TLG5wF5pIOFU5oD3iK6bDc7txrwQ2jklJUplv1NzTU\nT2n/nJPB2Mirdvr2aaMthUIMRn2C4UIeNgrsyLAxIMEucm92ANx858MyWueF\nNe0/Jl5OTonctajTqnWLc6IoJD2RAOnyP1yuwByel6Qh9A/Vby+oNSo8E6cR\nmjCD56C/b33YvNDYTVEsrPKEgXPtzhUGKWEBsIXXKaGo9xzb2rf0IvSMfBT5\nlb6ICGJwWwMm5k284PxEwnYXMFHg1/bk/GPwb49yNs/qsPnjhg1obVYAoVqw\nZI0YWAnYlqski1p3UsxoebtnaqfzYlJ1JsS/pCDLR7lHhbFytry45oJk5Au8\n+x5fOL+G57ViGTzsNqPfPrCrpAWXH6jkzuEMziubvbUlybE56bwdGXL7JBJR\ntOVhFgas+tgsRt+i4TRXXCajXCivV84u0xRnScSX4H0La2TEgZRqp6JijCC5\nd1tF\r\n=zeoO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBaL9PyS7aqIoZPRgDVgK/bSqvMwFhoH1z5jYQe8sV+dAiEA4cDhVeOdNlT6b7tmsdRAVcaf+Ut8tp3+8D0vWnLoNL0="}]},"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-textfield_0.15.0-canary.b2ca9b57.0_1588368980417_0.41499272833511514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.15d65448e.0","@material/line-ripple":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-floating-label":"0.15.0-canary.b2b088e7.0","@material/mwc-icon":"0.15.0-canary.b2b088e7.0","@material/mwc-line-ripple":"0.15.0-canary.b2b088e7.0","@material/mwc-notched-outline":"0.15.0-canary.b2b088e7.0","@material/shape":"=7.0.0-canary.15d65448e.0","@material/textfield":"=7.0.0-canary.15d65448e.0","@material/theme":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qPoR0AJAoAASH1/5KLDI8/N8rJIo0oEMm3PglgDLuqk/gXJBVMyNr52LSO5rOw8mW8EJivr6ut1OJinwmlWZqQ==","shasum":"c039cde29fe42b550925291351350d70e48d6962","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPBCRA9TVsSAnZWagAAurMP/0rZTk4ZLVHdvgo78jlG\nwStYZ+KIFLxcBEOUDaB6rqo2DNz52VgNeYU7MxXidIIAMlTyfAijgB2M/Lqb\nYUxwGMUXTB2M+jusQjMmRygtIEYw8vR+OBgX9NApgr7GSOUMfF4gkM7+vBaU\nEak97ohCRBdKWTlYfgllgQreelXiyxhktuW+Rtj4NxbP4vXw5mZauHTzlHyc\nrfeGl20m0gmXkOY6SSihk78n3PVCfN2VJA6Wd9E9TI59zwfHBeBglt0ETcvv\nQoFfia/K8M2qED/SULMQsA8tSYqcRcO/3fmPCsx9V8WW5J+OcQGCYQzq36XT\nYWoQx0c1QzXJGA0l3gZe6enYJFcAeUMDqM1UbV/1AfuPWumphbkZJ/rF/qJg\nJipOkQblDzfcJnG9Qvl0+3DNBc5Z9LQCY6ZbBLyXb7Gg9vr5Y4nNFWDe5YOJ\njCta8Y5E13HjEZWR+VOO7384LnEC68j5sNd0xq5SzIxZPlkDrrjk/bTb9F0V\nPwT+BZtEnqBFUk/fZp+5aNJqyzCLEzFHuFsbbGY86Ow/DsyGlKQe4j6S1IwU\nw2+WKie4PFiM5xveptGjhqKO5FozsG6PKp8Lv2ZogEd31Yo4AQcBTyAJSj/z\n1HkzdHwyScS7FyxzZ/YKbnqYJnfEyoLcfTLUvW7I0z5sZLA6ts5uMWPivd7b\nvxX6\r\n=VD9j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXQiqel3TlQNSAapzY6JjxH4CJUiI6OPiDRfkCWhI6bQIhALEFfJlwVuLNro867ebt+f8laCwk+yfcHx+wt+vuL13R"}]},"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-textfield_0.15.0-canary.b2b088e7.0_1588372416654_0.549068858246818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.142b1549e.0","@material/line-ripple":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-floating-label":"0.15.0-canary.fdd8f69e.0","@material/mwc-icon":"0.15.0-canary.fdd8f69e.0","@material/mwc-line-ripple":"0.15.0-canary.fdd8f69e.0","@material/mwc-notched-outline":"0.15.0-canary.fdd8f69e.0","@material/shape":"=7.0.0-canary.142b1549e.0","@material/textfield":"=7.0.0-canary.142b1549e.0","@material/theme":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UAf0/vUgGW72cb39ikyJdjpHMn4vfpzpiuyreI8Ee2ezCAXTBbrnSNQYpAqNRRoG8/BroQB3QL14k5GBi/mBXA==","shasum":"63d126e5e6d766e72c762769067e21f61203e05e","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvdCRA9TVsSAnZWagAAw6MP/2wsHjCWYMH72scNU2Fk\nIsqEVmyqZLaXZjwGRTO1RrJcobwkzsa7ltyElhc8AKzE1ZIPff9IWhfGsDGb\n56VmTmp9X2HD1c+5zsaWRlOtGWkewY03A5/rSVNksBLQLM18FYlM9IKDBE1g\nNexXY8PV7loyUy7sgwqc0cvirLhc0jscS2a6hWmJkoklARRTDbKKPmL0Se2V\nAxYxv/P6d1WkI/96bKuXreUqzjC/ZRO7D++jHGYaFqfrnSK2nHLQ14TSd/YJ\noQ+5ri/qiZMxJcixCCveC+4dyBTeTiWAZ61YT7AYcXK43anUnPmapmIhfQbd\n4wz2tkOUB+adodVBOCsD8bqXzrd3Cch0u+nnFCiBOEQFSGUArccN4GOXpSPw\nT1Q6h20ycWpUOZPpzv4zV8nkjJBWdo4P1k8yr3kVG/52SagTpyYrgd+Np12e\nVc8BNXgrloeP70yVqJdi2ihE956GWt3ARdRHsXpKygKY2yQefjIrVNBblhQd\nlp81gLfzLW/Ghy9SatUmvrVXnN4Rua4kDFxmf/3VndCgVFeugUQ7aKUthrBt\nMrSK+CRlT6JasvrUBRzmtXQGRhLTyQc/tBULAqMeHzbGZn33VF2o1geR1Zt6\nnR5MXsZLtc1RBLnAkqIA8V8oe9/JOjWLG3b+rNsW2oKx+RLfyrDjcBQaM0Vu\nA31i\r\n=d5zQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD84XFAFR0WHqyrLmVZTfhKdhXfb4T3cQ7ImOD7MEegBQIhAMjJGpW9Z0innv807psn7G+/WwDUcCmJSeGx+q1+8Uns"}]},"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-textfield_0.15.0-canary.fdd8f69e.0_1588378589502_0.13587225798270297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.142b1549e.0","@material/line-ripple":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-floating-label":"0.15.0-canary.730f45a8.0","@material/mwc-icon":"0.15.0-canary.730f45a8.0","@material/mwc-line-ripple":"0.15.0-canary.730f45a8.0","@material/mwc-notched-outline":"0.15.0-canary.730f45a8.0","@material/shape":"=7.0.0-canary.142b1549e.0","@material/textfield":"=7.0.0-canary.142b1549e.0","@material/theme":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-c/Yc6+3lLjey9pQx5a16i35kngw92kcDP7EW6GC+OyUOQonaXA2sWsaurvx+MDgoTX/ebAigItCeK3toQdFdjg==","shasum":"9d5e3ab02acea68ac0f48baa5cf1ab87dea4d309","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1DCRA9TVsSAnZWagAAkncP/3h2+WKEgNZvF/+jJ/QY\nKMYuTqPi3GaQg98jVp9+4NhuySQkxQeJnrl/TwnO+BhZyAi2+u3v9TAAJR0F\nP7gCOWd3WGdwP4uvu+piDdhtE1XYy8LSr6Ohs/Z+mFN2tHnXG1vXz8eGtGlB\nrg/1yS78TSbpex80OuB0JvrAKthp8OK9C6bgJ2qs50za6WBv4wNmO+xj0bIU\nwFCV2+XJY9K/sBfxis+PBeDsfPHoYLSIz3osQLitiiq7PY7JAR9cw5H52q7G\ntVP68cc+9nrv+yYPzhDkaguT3m8aQIMRrQh11dVb2eZ+LZ2WTsQL/DW9c+sp\no4d1zmAd2GxUIZnO3kZyTB92YXATzy4Vjt7dJcxUb1GouQG0FpnR9GHPqdX2\nmBQHTyFuzn/BaYf9QJ8x2WUW4FS1uRrT6jiUU2HctgN4W+zxbxi8zVnkLqfL\nk9Jfe4MwROqb9/ff7Sf3h3jAX50/HKbcqVo2EBwdp/Tx2XWmBSjJgMEe4oTh\n43kuDGLjlfmsy1mCZd07avf5uuWlHPO1e2CkUu4BK04XpJ8MaTqo6lEhrPy5\nkkmlul2exseyCyokepb5tOiwTrnWtbSow6Ajxxu4ErZJm3C0tJmSMkvivwNx\nMZeBGNv0ZgNSVW0mLxUorwmxWhR9hdWLKEeMs+PONR33tKeM7ZZ3INpXEUWN\nN+VP\r\n=hUUl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ11TITcnoMIYNi38HOCYa7Jy7ge7ZfKSK2M0HgL2BowIhAOqon/8sJ555unmrGolQo8NhBvmon7WohxzUiMoNX2PG"}]},"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-textfield_0.15.0-canary.730f45a8.0_1588538690778_0.6817766328768464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.142b1549e.0","@material/line-ripple":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-floating-label":"0.15.0-canary.4219bd20.0","@material/mwc-icon":"0.15.0-canary.4219bd20.0","@material/mwc-line-ripple":"0.15.0-canary.4219bd20.0","@material/mwc-notched-outline":"0.15.0-canary.4219bd20.0","@material/shape":"=7.0.0-canary.142b1549e.0","@material/textfield":"=7.0.0-canary.142b1549e.0","@material/theme":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pCFtPaWk9cOnlOlK6LkqBWbkM7esWw2wQxJ02LjAPtGnftSP/l1E+pNGDmvI57VJJpoadDONm6zb+e+hTvKhZw==","shasum":"41f971fc6d15c0cc76c3195505d02b4946de5039","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":246253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXuCRA9TVsSAnZWagAABj4P/1oUtADsvSgU7bfvOAsO\n0qaER0qNmkac5NhgYlUPe6wfd9ywvdAKlBvF2wZHNEG9HMlMfpUoxyRLYRqJ\nYqZltmjLy658kR/hnyo/CB53HXzE/ZGU6UfK7R58tEokmVCwbda8h+/DWXR9\nUmU8dYAUtzm/zUdydxW/5U9usEQXLKTSt+C/8dUvPOheBs7NcmBaoLLEvEX6\n914eZA2R3MSbHNusJb12eMudFMD8tJpCYf5swB/23GPaYIwkaxn28CQhda5O\nPPKYoEsvxStcpCj/hZBvoq6dqTm9f8AV9oHTz8ooPcDezTAzU89+7fxgUbVa\nGNLbba9SEXaVcltOKsjrRLViAQJcS0K65DMETZLp234UVxzxbSMU8EwVZW4Z\nPlOJjsTpdcqv5PkgpXT06lTTMxJHqs+LZmGl3jaXZZw4jiv35wbWIRsf4ws9\n+axyIDa6p5w5dOvnYyXGbojYG9M5MiOCTUznWbge8g5Jq7fWbzPjEOdBYn3d\nqYhkaaAy0jR6O2V4pQneBP4DSAsM8Jaoss/db0JzcubVZ1wRn1pTR2JIgNFZ\nIwCatHLDlOfvNIXF1/f8oYUbP4Opfw8y1v9RnO8+Ky0D405sKKXnXof9sGqF\nq58lB1NRfioqVS3xjuWk5H+AFJn8PiEA3AvzS9FqLxK5AHtka4c1j9raH7nk\nQIHk\r\n=5O4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfQSPdM1v7umicCu/rjiDKvKGRBKiTzQst1GmOOjaKmAiAZcIWq0RY2Wa0KkJ5DkcESlnac6wl1q7iXpLcxiibrLQ=="}]},"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-textfield_0.15.0-canary.4219bd20.0_1588635118362_0.5937398911822767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.03dec929e.0","@material/line-ripple":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-floating-label":"0.15.0-canary.1d83cf6d.0","@material/mwc-icon":"0.15.0-canary.1d83cf6d.0","@material/mwc-line-ripple":"0.15.0-canary.1d83cf6d.0","@material/mwc-notched-outline":"0.15.0-canary.1d83cf6d.0","@material/shape":"=7.0.0-canary.03dec929e.0","@material/textfield":"=7.0.0-canary.03dec929e.0","@material/theme":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-X3hpSzyysaYqj4Ibw8Xgl6b503YjSJu3u+QaZxNenNgUM3Lsr7Vo+Vet8N0V16Gp9Emj8XFdeYq4ODmg0rVdpQ==","shasum":"f065500119b6d969121359c9a5b4a07cade477da","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":247023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5lCRA9TVsSAnZWagAAOUwP/3FPe1ZlGn4kG9ULloMM\nLdn1Rk1WQ6gHxbo4P9Ok+NvBC1irhtjpa0BC4WLiF7p2xlQTXHBdvL1vDdjZ\nxszRLU8yxVgeow0/A0U/rQLYv4tlvOSc+WVYP1rokm7FCLBiwrfX5yr4ZTdD\nj25KxN+DIOQrZXVaU7RnkDfoZwkhDDsQKMFHVSzadnGHxIeFn1M62pOs6U7t\n3Xrt1pnXCZUp0IxWVipoN4TpX4pneSosI3lc2iVtNCDrtQV4vuOvZ4SFBEKw\nnAC1lu8KCpEopfQufUwaIpOkePC1la7x4vHFaEh/iS/a3Eq8vY1n3kIIj9GF\n3yZJVm3crpAX2OSRAj+9biKXjxmdTTvgLcJFypOt6LU7uXLDBVWKLjfezkY2\npDh9QSi9Vz559jd5TP75S396nWGqaYRTUYCTJeiA+qYY44vGzUonkOEYtmwg\nLM7KXN4XkWm4PegRdwOAIpWCGzzB0NbMJAihZigD93w/ta2OPVBDXKYl+FxE\nlSOOtmkTzuq0w8juw5Jmh1VJ9z4oMPoAXhQqBCo53ZY2aOTYRiwOPL1g+Oo8\nMNXGZ9/WXEn873cCvJFlrWD9sE/+xFVsnnPei2/xHkBeb5E0KGVhoTPWumYX\nmCGxwBVSYQ15SZknJ1mtYCC0n9l0wfZ1bVIf9dHQq1kuPkBjfQemHX66F8ma\nsw2I\r\n=148H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoqt2QQ7EWooY6OtFPcB57wBPcYhd05F0116FfWSRtFwIhAMPOpFBi2oVcJoF0toJHvvOsoF/3vsYppb0wa/9cXa3W"}]},"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-textfield_0.15.0-canary.1d83cf6d.0_1588698725122_0.44921425448385954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-textfield","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.d92d8c93e.0","@material/line-ripple":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-floating-label":"0.15.0-canary.3bfc63aa.0","@material/mwc-icon":"0.15.0-canary.3bfc63aa.0","@material/mwc-line-ripple":"0.15.0-canary.3bfc63aa.0","@material/mwc-notched-outline":"0.15.0-canary.3bfc63aa.0","@material/shape":"=7.0.0-canary.d92d8c93e.0","@material/textfield":"=7.0.0-canary.d92d8c93e.0","@material/theme":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BJWE+H2mdBGd+T+I4pJN0zsN09mJCOoIHHTtZvzf3aXNg3aecM3SWmDJ2n0FCxIywIzvhJjqTs2BkWgmA2dRlg==","shasum":"5e1c255b87b7c6a9c437cf3b30ccdfdbb73f058e","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":247023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazYCRA9TVsSAnZWagAAoCIQAKF5mRJkZsENCicdzfSv\njijlKOZFbBn8rFBQdtC7jVjL00h0G+SYtMUFxnfZbiM2Zb74ZabPPmoTn8XO\nupONwKAOJXyKBkG28L+mBwQ/lYLjVe/wKb9wem3y7di1pSRyxAZHIoLfna2u\nYwviayqQqf8zOq+337vWgX/9hLsYk3+dihSCgcUbP4vFWhfOVI3WZKkmqXxI\nzH7htXBhF+whwCbLncfzPqNN2sPOP32/b1Cw0Zz5fRfbBX10YFXVuDjvJuwY\nzO/8h/9VH2A3/pobnGFOLagUkbstEKcX1p1S3SVq3iqzBnjSCOmcUGqI7LOb\nSHO5Y7STSc/hECa/q8LPMKXv/UTDaSbp0j5OZZK0L+uxre8rrqiZy3onQSTX\nEwXsIIRFnpSpaAm7IBsZjOtL9Qr0UAQ0x2LViwt3H0ZG04SPfTePGDjWf+7Q\nOG+m8aHdrsG8BqbYOmGW2jWn3iej1swpqo5N4LD9clzq4Qi3Dwn4fAt+uPfn\nr5lSv3Sl3SjWjOJfiaX/zuiRoyLpNheEMwGde6b3bqR0Z+3m01w/8i2d9/Td\nv0puDmqNGuWUUtZW8X0s1tm0Jj8XS0zGRl8/8AgmSi/RS7j7xaHfc2TvZPyR\nPv/1xszGeVVPItLjfdaTB0BI5cNOPGnLtpf5AOB0y4r6PQcB95AXTieVserc\nCSFV\r\n=Etb/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOyV3HenMulk8P6NUrbpvFe4kARHsZyVNi6BR++oUOVAIgLuCdXKerKU4wH9NK80RzHo7Tf6L6rGTU3JKGbWsYqX8="}]},"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-textfield_0.15.0-canary.3bfc63aa.0_1588702423922_0.4115904411630604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-textfield","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.d92d8c93e.0","@material/line-ripple":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/mwc-floating-label":"^0.15.0","@material/mwc-icon":"^0.15.0","@material/mwc-line-ripple":"^0.15.0","@material/mwc-notched-outline":"^0.15.0","@material/shape":"=7.0.0-canary.d92d8c93e.0","@material/textfield":"=7.0.0-canary.d92d8c93e.0","@material/theme":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","_id":"@material/mwc-textfield@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-g3ncA1LQSPIVykllm/57Pyvuz1gUZj/BAKi8ia5T0wZWdvU96x4jCLK/2bUB9WDt2QWaQNap+1GI1MJ/mFekvA==","shasum":"9fa77419eb843bf249d065886bc9774b81ecce65","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.15.0.tgz","fileCount":19,"unpackedSize":250953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepcCRA9TVsSAnZWagAAZr4P/RRYX1bFwrzi9BIa1mx2\nScJwlNLbAmgy1HefSRhFuzDkbUnlcAqtKsc3huo7ezmoRLGIqOTJshGRXJND\nkG57QkwA7TZrRxdgYJn0dbOQuNeSaBj0TkGGfDj7tVKL4c49SLjGVoGkC0bG\nh2SY/Qp6eMmNHwhQsmOjd8+z9Kus2W53p5eOQqdDYnsli3Vz7WY3PCLLAynI\n7tzFQmEEPn7yRaxpQqW9jgD4bBNq/LEpu0EpJjI83rSECWFiKF196VN5UPo+\nACCdtk9HEqwBhy6FC6fJDFOKZlu7nbEIV6uUx03FF33sZIMhCX9mLEb06PTG\nvRcSYB34WzNRZi0Lw/aHmG37zNV4ThUFH036TuXJeJ+Spou0Qfuetzj95j+o\n8nD/RwHYHYwJOOTy26S4aZ5092GktDMFeJvgS7JNuB+IY5Asgu7iqEhlYhOp\nbaBhlb0R/a0qn7m4/wKe9PArS02CsyY8SoNztQ51Qp4TBVW7mrRgdQg+EsF6\nUUCPTC39Fynz+mNTmiifBQN2j3VZKzbreipEuD3iUYnwOJMKUreA0tkKe7NE\nkWzFIRKrJaHeWzmi+3lc/Q7G0q6XUdmuQ/ni7FAzdWOC/qd0EqkE5L2vvSC8\nzGbw0Gv4H3jXi6pdiIxbEgvEWGyVo8UxjOjmYNS5pLc1rnOoc3B/pNSYb7YO\nCkU0\r\n=t25O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8a8wDtcfcYcj6MZ2UZ4M5WXQD741WelT/C5ziPiF9BAiEA39aFQ/ove9kTt1snA0V3GX/nxkBOhBSxOYW/y3hBZBc="}]},"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-textfield_0.15.0_1588718172195_0.08400517900682858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.8135cc085.0","@material/line-ripple":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-floating-label":"0.16.0-canary.1f4e3d1c.0","@material/mwc-icon":"0.16.0-canary.1f4e3d1c.0","@material/mwc-line-ripple":"0.16.0-canary.1f4e3d1c.0","@material/mwc-notched-outline":"0.16.0-canary.1f4e3d1c.0","@material/shape":"=7.0.0-canary.8135cc085.0","@material/textfield":"=7.0.0-canary.8135cc085.0","@material/theme":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ix8ogDqBbTi2smh84HTNwc+YvqOYGHaCG8HgkjoEWgupPy32dka950NWwat22n6KsJCpHYASMaP9/0/4sqdZIA==","shasum":"b951badfb17a90fea048161fcd602b1cab622cb2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":247023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRsCRA9TVsSAnZWagAAOAEP/2J3zYKU+Zile3SxH4oW\nuFh6pdXqNLc8yURwuqcyIEggLVg9TgYFSKeh2LzC2lzcbNNULuFcxQ+LhOUq\n6lEZ25C6JRW3Z47F5o5twPdmq47jHPuokys2n1WlIl0bVI6gBn/zda6faDfO\nkHU3Z3hzpFg6ljHU/IAo09l7neaQua9hq1ZAEExb8tuhf+pY1uCiVWLztqii\nnZlg4WDtm8HSAFd7x4U83fCu7gyUn8NXz1addw1qrXcNBoYNQVhZa1tcRapw\n5t4gNXzl1M46PtYE9eocG1tFYPCeQHYWiit2faYF8LUuIuUFSAR8k7/4eDzZ\nu9pJG6R9d4ihSrOHxp4Bbf729b7wRLlw6LDAbzOvEJp6XyakZ2RVwCK2/T6w\n86iU51nOkiTetcctVPKv42+MnWouTbfDJEbV2oDk6HziBfsbD1FM3d7vYnX/\nnvMOUHK15927gpAxBP9XwOEKhIoA7U8a6bWBFwI3XzegLCXQG+DOUryQDzAz\n5Aa2muTMo9sF6NthfPOTmmUZHqJ5NWx1FUQBIPkR/R0N7srqfxbBa1w7DYhG\nVWT9ykw6UsjJWUbt2uox37CORjwshcLhrsvc9LEqzJEHW7y3KNWzr0XSYgKU\nHOppktWZaaxUODd9KlV4FBIXHmN0uCG0Nlpjf1BQMaH2ROS02x1MsWkW1aAD\njV7T\r\n=yuud\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfhIsmG3aR6f6N0Elxy5pqJjLIZSP01evaIxB2VXLNcQIgPsXnpZaFuitpDP1QnHuTDHWzaf8HrxPZmU8eL3N3IHw="}]},"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-textfield_0.16.0-canary.1f4e3d1c.0_1588802668472_0.29165839535325033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f83e00898.0","@material/line-ripple":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-floating-label":"0.16.0-canary.bc8759d5.0","@material/mwc-icon":"0.16.0-canary.bc8759d5.0","@material/mwc-line-ripple":"0.16.0-canary.bc8759d5.0","@material/mwc-notched-outline":"0.16.0-canary.bc8759d5.0","@material/shape":"=7.0.0-canary.f83e00898.0","@material/textfield":"=7.0.0-canary.f83e00898.0","@material/theme":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p34nCpqIoPiXunaA6s6nV2AERFh6xf36CljwZAeUm4NGrAg9iu2zo5f08IsQHIHAZp7+TOHn/8ONNm151Uj35w==","shasum":"4365938978acf1971f8cc0374a075f7bd6016b37","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":247023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZiCRA9TVsSAnZWagAANxkQAIukh5mNxWeDM9SUJEYM\nHgCwbYHU6I2IiOTQPBXG9GrKlil7xfNEpK/LqNdhaJpYLdaeBcD3j7cTx9tr\nyHKeK/8IFt5a9ZPAfZfYAf2c25DgjQtm2oZIJsNHSuTjE4nhTqw/+BuS/eLP\nh3ELLTXtf/d+K14ELN/H3Ur7D9G6E55YdYUiGLuaL7lj/mMUZWaA6cRmuoA3\nszNwstf7zHiBdGb+5C8WveHSpnFhsLE+E6knIBgQ7x0uNtBhL+6cm8k6mLPG\ngf3fzJsAIG2SJ9rFl9V/bMAJGbajm2TOvgxVmNcAZQtSBT8vhSay0+rM1taC\nTUU2pAbOBCOvPZhqzcae8jgIjXuVC1dMqrjtVuCAq4dGi8CkMhPVdqkJLq/x\nV3P+LHaiKcFWTmWpPYngH4dVzH4nr/xYHNK2M9lTD//bRK+JtSXQJjy4b267\nyAiCrv1eGtBGRZR9pv09vTS0bSDE2TEG+lQnvO2/K3y/hL4JmJU6cWBYXEgT\nCUblHcA3L3D9zJ/gQYVwhbmqmPNI0GD7qprFeqk+/FVveF7CnJ4kYELPl0Bo\nJcF1ElDPjX/z+sXDYz/v8HDySQc94okSkAlLmtMK6JZRCZZln+B7qssl8t3+\nvgcLnhIhjfPn4mNl9DxrAdmtWCo1AEqR0f5++ihaXjR877ph+PmLr7Zb1w1J\nhlKH\r\n=iZ1Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC30wA7dcYp4TMly+7nw1LLWxZUvapb6+joa+m6c/SjxgIhAI4+yGj5EY+nj9zLgDZO3zPK3R+6lRYa+td2gZzUSbtS"}]},"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-textfield_0.16.0-canary.bc8759d5.0_1588893282264_0.9501159152195511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.f83e00898.0","@material/line-ripple":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-floating-label":"0.16.0-canary.d1379acf.0","@material/mwc-icon":"0.16.0-canary.d1379acf.0","@material/mwc-line-ripple":"0.16.0-canary.d1379acf.0","@material/mwc-notched-outline":"0.16.0-canary.d1379acf.0","@material/shape":"=7.0.0-canary.f83e00898.0","@material/textfield":"=7.0.0-canary.f83e00898.0","@material/theme":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bsHoC9YQLKgoZNSIxCj2ZLv4yNMv+ZXv+FHCDDtFMCMWlM5E0xPsK/8Jan4SnkRK/DVbJr25ciD3Q1S3wxhazA==","shasum":"3243e0267426d785b24df403260bbffe49d29630","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":247122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnFCRA9TVsSAnZWagAAb8sP/1mNZkj9sqHbToQoKEqI\nECyDlTD3t6CmPvfYlmZZa1hOUYh3BwWS9d8qBy52C9P7fgjVCeYSRJmpQHUK\numvx2GetYsFMi6orv8ApiGxKOy9pZf2QalMK0ITZtuihzy1j1bLy/izpy/it\nn97Skv9KqPqy8EduntKIXMqBjvsoeXS4Mxz4XnQLmZE5wg7TlsUab+4D0e6s\nqSEySQpaSkbZEWUmosN37RpiiY8xXRulOz+Do/cTwVcAgakN6XFTM0MGhUgS\nqV+Y2metUXG0SYYEFaABSPslQxcvjN/81latOM/nSD66EMYG2OH3Ccb3EK1c\nv50vnNZMUkUIF8l6blSRZN5i1oTHKEZGLuFD+J0PiczLOsEhZ/Ac1I4ByuNG\nebSqOSSG6PfM83I1vTg5xqoxmGSE+pkEC8SXgWWxfdgOCcs/8S+3vO+KVqSc\nSlr74PhY+HGQonRz9c9dYIdkaEPEDaqq8yJej92PVLyFftEKPdBuHhyTC3St\nj5QDHmfCE3uZlYhw92VS5HfrDMzNgu/8hFtqYm+A8SVfOk9UIjwyfyZtsjDM\n2+0MBmbdd+x8Hi7i8+34FNm+7JhX9W6mDzCIBBYA4jAa1/qqT9xG9/sBQmM1\n4oL4BzdIFZSp1ScFZhpFSX814EjkjXjU2dtmSMRVBM8t7ixIUUQSSeCiQIFl\nbwFa\r\n=5hpW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6aTC+o2RudfZMFvCIB3wrtpOnIHEKE53n3TEpfPP6lAiEA3UHpKjnVF4HzMt4ONOhmspZ72DP5USsMlpffG2TzwQ8="}]},"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-textfield_0.16.0-canary.d1379acf.0_1588959685267_0.1915169087836357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.047e6b337.0","@material/line-ripple":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-floating-label":"0.16.0-canary.58d51fc0.0","@material/mwc-icon":"0.16.0-canary.58d51fc0.0","@material/mwc-line-ripple":"0.16.0-canary.58d51fc0.0","@material/mwc-notched-outline":"0.16.0-canary.58d51fc0.0","@material/shape":"=7.0.0-canary.047e6b337.0","@material/textfield":"=7.0.0-canary.047e6b337.0","@material/theme":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-esLjoD2rqehPKyN1b16ETW3NXp4n3H64RoFM0QlNrL4i8hMZ3TjWM7i0gELk1u3rkhTe8D+88cGGX6rWBa9fWQ==","shasum":"124537c414ed25c6e0a1ab99b55bc023f8101b5f","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":246705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBLCRA9TVsSAnZWagAAYJ4QAIFrBHfcemPfL+++Bat5\nU1hQ06puNkA3SHMpNJ6e5rvmKX7k2J+Fu6oy05fD9G1l6nmkm7ypyKvlbieY\nJODrDYCQE/0nY729/1Lxil7IV7z3isiB8Ff88AacyymevNrv8+Jfy2UQUHjH\nv3g9EbCSUIJB6aiBeObpwkYCy9pQ0r6nwkHHMtNIEflrjcXPDb4iA49BdvWV\nwNJVpPOVEGouSW+yDTugADSBVxMX3ExSZ+4tOlbsLkejCPUfLNRUevSQdFZA\nyaZ2bU88LsH78OnpoQI+VR1IDZaUDvoY/yMAUR0/LGbE7VfH+Xk8H532ia05\nP7OA5r9/MKEwxl3mF3k41j2tQLnQYcWTjqpdyOP2NrMjsC1WrWudS0Dyytnt\nR9ilEGv9tX7q7apzT+WLXBcf7QB1AKD5jlC3bNpSobVOm2LRPKQQYxuNG9d5\nHA8UGvwNTzi5fL2hbArzeVp0B2Vv7vppt+XBC9M4I22qzIkF5H9p36TUwdAP\nVh/FCqk8hVMZHySBjQ4/VdRVhN5Mgeqo7n7p764I+Kpw1jdV/xW37rcaaMl5\nluQMVD1yh3T+3jx4HTDt5E7nUD3F3IYm+jHd0/EC+ex7nu+zfJ+dZ47oxu8t\nZOAaHJuT1HegCXfnXRrH5fLYdlzUNdj2RaqyqqxM9NkPFlg6NBGt+wIfaHUW\n/2/C\r\n=Zh6A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnH30X4A69al78Yl0kYwsnKnIBeDVds7P9SjNEVaVMkAIhAP+e6PWRuLJ7kMNmgUcsHMUxHZd60u+7qLwY+AlKz5EV"}]},"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-textfield_0.16.0-canary.58d51fc0.0_1588965450641_0.6198437760596966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.119e21426.0","@material/line-ripple":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-floating-label":"0.16.0-canary.588062d7.0","@material/mwc-icon":"0.16.0-canary.588062d7.0","@material/mwc-line-ripple":"0.16.0-canary.588062d7.0","@material/mwc-notched-outline":"0.16.0-canary.588062d7.0","@material/shape":"=7.0.0-canary.119e21426.0","@material/textfield":"=7.0.0-canary.119e21426.0","@material/theme":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LE/s81WpqpBDbsJyHgkQtGWQYE5cKzzeN20Sk0gbRhJ1Zj8FjKtxzK5kcG8Z1K9ZWMpf9Myfh0MFmnyFdq1LAA==","shasum":"d7512ed3621819833f281ef10ff6643eff4dd20f","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":246705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3fCRA9TVsSAnZWagAAZuMQAIaKDOg2fbiEG61YXPT2\nRDXayRV978/AFYf0OLpaMAD6/RPXB+4IC4XCokhE4eaxJvMZlDHuoHvVYvdQ\nGQJUeNsBgXQEtLJ97EYKyBwIRSKHy4mNmQbsvP9U5fllZViEDRr2Or3FfyM2\nvOnGBWGZKP0Tte0je5ZDz/rAIlvvpr1E34wpN1zYnos1KhITxz8f54kGyExQ\njBNLfJfMs73pQ/7A9bOvmpChx6AKYrk3m7dMsCkeJJ3vXgedCuKqqV+2116u\nR0ftWm37AH/2Ne1L8xr5sr3mpIv6ghkyNkV3WE9SuQQQJPjIbyOzZ6sYTqsz\nZFOxsukseel9m7a191AGLsxU+9TShy/SN8up7i2HNWCxaFc8d1rjtUI8IW5/\nE5BmYiQ8Qf8NaDlkOo9CvAScUPlVeGFBnju6DmrQ2AxtV+6QfgG0GI9n4YN3\nBPjMoP2Hy2It9jQXUNCbOps0RGxzLyalo1bJoeMrZptlzSDIzfGO5cb4MazA\neidbbVbGNnRJvQS+Ilm6b7p6YV8aeti0BNHOK/T+IGNEqOXAAGUbLonGpIDu\nfJOAbMN0/XmRV9rkECngbVvfa6FphGn5WkaWWSuY103LAFxSHIo6OzdJlln0\nWrCemtgPgybQEPef8OyFkGv0bWZqZTZa7wEPTxmbvsCv6fmaa5lK569Xz0Yo\n2lbb\r\n=OGXB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfrGsIpb7NKLBDI86+Em4gLWPaattbiRxyV+vcrNRj/wIgB87RSIVPXNaBN+Pve0ny/sQ09gnSFNF6g1LDyPdfAI4="}]},"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-textfield_0.16.0-canary.588062d7.0_1588973023182_0.17795291069493757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a5aeb3001.0","@material/line-ripple":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-floating-label":"0.16.0-canary.fa21f639.0","@material/mwc-icon":"0.16.0-canary.fa21f639.0","@material/mwc-line-ripple":"0.16.0-canary.fa21f639.0","@material/mwc-notched-outline":"0.16.0-canary.fa21f639.0","@material/shape":"=7.0.0-canary.a5aeb3001.0","@material/textfield":"=7.0.0-canary.a5aeb3001.0","@material/theme":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jnKYdFf/tPT/3WyRhMDUJ47YXPgAQ7YnNDh4XGhpSelV57LO7N+wwPP7PMY1h0V7Ew85Ei/MVmfrVCT0RqOSmg==","shasum":"6c3161f8be2db530d167341a371e4920cbd851b7","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":246705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuYCRA9TVsSAnZWagAAipoP/ifbB4QVbtT377+0DmY8\n4z3p7ixrlx/5KFc5SSerrUSwf4ugMHZpdc9prmYOwK6GBU0Q+bh7opIkY6iX\n7PM/XZwkxvdS3kpieiy2lN3cGuoH/GcgKyNusmQWhCm+iFQ4UHhIL4Nuzlhr\nw33Qo4iy6oCNDRitIQraXLwSLk9m2KHcmYyms4e2+6eqAqr8cJOq2O35QEer\ne0etjg6ToqihSoensGqhNidgxw6AAK4BJKUrr5onb6L3z/d8ycVBEz6mJNbJ\nAfcyidLazhDCzAT8R83b3mTih0OCyj/JjZem1H3ulQbfC0y+Wk6dCHo0nTlL\nvEm8rpsoViC3Yi1dmvldSUyz/FByTtEWIP5hrlQgq6anwKOruNRzOf7sLf1L\n4Nbp9YNOGxMfaoEBwJ3tF/aUmqz+CuABKStT35Vsy6QxeaY/qHq7irlxclBZ\nkm6x0qfgOh/eS+atiyQq+mgoQn7tji2e3xion5wIt2hepCTZyizKgwiDzIpx\n0LvgWuoEcqHG/SmJ9bTIdGYlta7TyubYnkkayKHyAF8v7srJkhe8qrrhng2R\niiIe93lhsDeP0RFTOR3iT7gH9QO9Y5XzlagrtKMaHMHe3JvfojkYtUkvOjQ2\nb6XvKUuK/IgsvFnbksYiih+/GuHMkTq+0Ge/qm+jw53ekv39s5Oe4LlUDH/c\nAkE6\r\n=l8oM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjrCP64/JjmbxDCLhZ1aZjmvNWKZa2HSdYYbbHt41u6AiEAvJG2OIgxPlRnOEZZVS0O4+JRIKZyELJkAnYXBaScf/w="}]},"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-textfield_0.16.0-canary.fa21f639.0_1589218199606_0.8120482526462596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a5aeb3001.0","@material/line-ripple":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-floating-label":"0.16.0-canary.2772c509.0","@material/mwc-icon":"0.16.0-canary.2772c509.0","@material/mwc-line-ripple":"0.16.0-canary.2772c509.0","@material/mwc-notched-outline":"0.16.0-canary.2772c509.0","@material/shape":"=7.0.0-canary.a5aeb3001.0","@material/textfield":"=7.0.0-canary.a5aeb3001.0","@material/theme":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l4hrMWXvSMLAP+hYrSQpeufsYj0S6aBzrrHy4DCAe4p/83BDiEkX4zJyUUUNF1pDVLWz7kajDZk8r77Pf4wWoA==","shasum":"9ee1c865da09774c536560562f3e08c30fd7a3b0","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":246705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZs0CRA9TVsSAnZWagAAoMgP/1AFBvkdigvS/NGJ2s/H\nppYntIuqk7N6UF05o1IvgnIrYgASMNu7KedZczWQghm6aAbIrS3yOaE69SFt\n4MN1JtA51egPB5G7d8LGCGDsFHa8uE0d1SRU6rPhmy70ooQF/lZZkpCu9Q4c\nGUqe8wbQvg3RaWS66qwk9ilJkSzKtsJeKGCV8K5DsT3dGhEm1H1sHUvLcLD1\nl1zoi79aphWXQve4x5vql4lxh4bfwFCc2cXOxKSLGOOKAgMrgzbQc2Y627pc\n92vvQMfNFyWK80wt6Fgy1lAaalk2RRLpE8+DWmk7M/5LuDYCRhc0254Ba04H\nGORywkGrJWm1YgESncxOLAr7JKsiPKp5c2Ul7ekZShz8tfiMIt62XhLioIyP\nvC1WtilashofXuy2ddxKLHimCzykWCps5aT8g9zlggDA+jQQiR4fcV1hI3DN\nS4mCp0w+YmaemfzdvdIyXyZubGrt3ZOXoyrJGZEY47osE2UDSyhVOz1qEJYb\nER8VTU6JfDIgRvNSHHaz0SFdZgaD5rucK2MZd6UqxYAAJjlmxjvvM27IDqAJ\n5ZwKa5TgKQAPXz0YummQtXtOdlzMFUK0AlShSoN8YnD+x9LtymvIfDBxutFI\nFWnnM08iRgJZx1U621slZjgDYUalASgMIvHz9jDdusb3s8DdWzDrkPVuXiQi\nlpg8\r\n=x7mP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ5ZNbsHFa6xKxqPyHy9EECaKvIUanxpd8+7fL2wT9CwIhAMlfqx1nL4TsXs4YxIF7sh42PYCs0QNY64JhJ5QEW6Qn"}]},"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-textfield_0.16.0-canary.2772c509.0_1589222195779_0.04339492537679557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.a5aeb3001.0","@material/line-ripple":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-floating-label":"0.16.0-canary.fc4796d5.0","@material/mwc-icon":"0.16.0-canary.fc4796d5.0","@material/mwc-line-ripple":"0.16.0-canary.fc4796d5.0","@material/mwc-notched-outline":"0.16.0-canary.fc4796d5.0","@material/shape":"=7.0.0-canary.a5aeb3001.0","@material/textfield":"=7.0.0-canary.a5aeb3001.0","@material/theme":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eEoy4hQVoYdyQHphDixMNLcZWYo+sZgwJgiWDtyHidwsFLY/bvGkCAaHjd9KacGfnCb2xRuAWlbH5zBJCYsKJw==","shasum":"eb172daf26eef5ed5a0ad8c21ef51d61c06316d0","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":246705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/yCRA9TVsSAnZWagAAZ3UP/iiCibFgUAVVEloihXP/\nnK9p8R+L4fxFgp0UcsbSgCn3kT8Z2t9fjXsCrLWnpy6P/3xKjvt0sem7/AYw\na8aCvqRmaBBHszPclXXA47vIM2HCBQLCOoKixhp23brFuKr4H8ry9xI1YOM+\n1s05JpjLLLWHuhNiIe725ZyjIHDI3CQplt50hknV4k4RwLSA9mtXzwrfUMQv\nJUHnUIYNUnhZuD7rPBf5LeuD7djr2X29WUCsEomAZOnWnLPDVc95jQs1JQAk\nj9p0KZnJ/TyTfLyX44qwcaWkxDgd5ECYgWt+sgQVj8DJDgLjaflnBG1u+VjE\nd7XB+++fqmheuLMMBufBeBCMPII36ud5Q6fGrRS3diZwEPLHJiHMutPbf9s4\nrMho8EnXw5wQp5tCTCk81r2pp37bpuxgRpX8leM3G6L0/lvCwA+dYV5BEpEf\nx1M+aOG8Zdji9MGPnSKz5ZS8lULNElc7UjgFWEVymWr9kn/k/2ni8SHrHA71\nlCsTadwdrtj3mHzFmjwoGojfxFKrkFlWwvlXTr6ZPFkANgkLnqDSCoA/TIh2\nTG+WLBQLft6ecjXp6G4mcMrTSntD/Ery4jHZxJ0gVVx8W9vNLKDj5sveQhtY\ncRgqGCkxKwiqROnztWCXZcI4lrS6uUmExDO9WDueQz6/5HdXjv6xzE2h1Ljb\nQdQo\r\n=/V9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbqCT4KOkrcYisCX0RpxWABEL1yx3Jhw9kK+mlRcOp5AiBbPAPBSCxgaXMw5a2B0ElzZh7lp5ekKfgFA2ecZ7atsg=="}]},"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-textfield_0.16.0-canary.fc4796d5.0_1589227506011_0.9177732478550777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.ed52af767.0","@material/line-ripple":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-floating-label":"0.16.0-canary.0d1c5f2c.0","@material/mwc-icon":"0.16.0-canary.0d1c5f2c.0","@material/mwc-line-ripple":"0.16.0-canary.0d1c5f2c.0","@material/mwc-notched-outline":"0.16.0-canary.0d1c5f2c.0","@material/shape":"=7.0.0-canary.ed52af767.0","@material/textfield":"=7.0.0-canary.ed52af767.0","@material/theme":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/rUVLEYK81lIz6txl7HsWqY6jYOqkMz5/Acy6pK/Ot/GQ9ftVCZ6xM2Ecw0sOHC3d0PE9wjeTAiGGJqLizaavQ==","shasum":"f487baa2b921146d47114b5dab118fdf2c4de5e5","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":249603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFzCRA9TVsSAnZWagAA6JoP/iJiqfU44KS/BCwBQuLF\nNyoMc/po5hLXHpAlYByLOQqWWcdZyyB203RKm9EuAj0RWwkiQRXZJjUrCsIa\n9M4mMS6UGQw++Bh10breyztQw/4dz+hFTRg1amIFd7pWGuZ0oCBs5qIAN7Wq\nyARz2bwKDCNC3zTwhhcSrpLcCBGmrbqTSeEwH4ioscZewBM32Ts/QNSKgPNi\na4+SpZDZ1YvyspT0XKpK0iB3oAUS8351jUfHEg6Wp6H9nqJMeMajsExgaI+V\nVzzpUJigLtL3zv154/n6icpIGBEJ9m1V35phPpiETdykHHtmrpT//SLBt2XV\nkdHrtY3oExIUnkbahT7I/dL4NUDRLRFZjwWRObfgevKoTnCIWympZfDMA+w3\nGFeN0KLGohQHRkS9CVJUHdd4u5QgjSBUKE4jKAIprlSA1bWohWR/HAzRhZhj\nHnp5DqVp5EY+gFYwmYNZZgv+g64dgkRzOK8KT10tOwbBxNlSH8nCVa7eq/Ee\n4LoQfjew6BPha/UpK52fbfiYRToTiERon1zvAlKmqBJGux7Rsu/vHNKCaaB7\n5M6com7ly9daVVSASx0Ox7VD4Iv6JDZonCsqeaEo5WLx60ICQCncJLQr2NvC\nSFEv8M5jR2KJc11Pt20SoQRIUE3QRg9+4KHnWHcfW+6pFB38GjTldXsbTWm2\nmfd1\r\n=kSON\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAyLsknUq5RXqikBeiuBLONPozm182//gLUa4hnzWiGAiEAx424hVrCQdkyCA5ic2AUr+bPDLLjNzBOzsBnxRkyw8M="}]},"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-textfield_0.16.0-canary.0d1c5f2c.0_1589231987060_0.4779455012433125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.058cfd23c.0","@material/line-ripple":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-floating-label":"0.16.0-canary.d083d93a.0","@material/mwc-icon":"0.16.0-canary.d083d93a.0","@material/mwc-line-ripple":"0.16.0-canary.d083d93a.0","@material/mwc-notched-outline":"0.16.0-canary.d083d93a.0","@material/shape":"=7.0.0-canary.058cfd23c.0","@material/textfield":"=7.0.0-canary.058cfd23c.0","@material/theme":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eaHrn+g5BcB/XdlcYQYpo8+E1yzcZCeZyb2misjrvINDq2SRB3bE1RQoVNBxwszcn5BGEiOZsgATOuKLqzQYfQ==","shasum":"bfe8bbe26e209dc56b0155237bcd48c9dec13ec2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":249603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetICRA9TVsSAnZWagAAH24P/25SxvOftyNd7QZuz2XQ\nSh9c/vzmIfacZhTaFCt0cfZAtfN5w/DyseND29zGvNgwHVOycHD7H8R8al0f\nAphZ+GjLmtODUf/Ifp7brmV132iMIutCOKp74YqnDQVMJaULWXE24jXvzW+h\nL0rlvmbk6rQfu+zfLIYUeJJVQfKhZ7MeA4wRykXxuTp92On4U5r1KI5DZxCz\nfeGvSR1a334LxCG1pz+Awkwg+bvOm6gQBihK1PC0MtS3ZZCIZPhREdY3NkD9\nMX7qrjMAmiyqevf563IXshozwMvGuRpjaPMPnDHGv8h1DjYANDW1biK8Csdq\nh53q67snMElUjSkWBt2P8G4ssqE6mSTFY8QVnhfBsFaNx8ULh9QG/cVqLXkq\n9K0q+skg3roHV7SSoHffkLO5t6ai+kn2B28VuMcfjXUrce/qqbrTAFvrMF8g\nkNpZEPLKsXZsKfj5KWBchQ2G94gq85Rt8yRxqqTzUSTt3IFTAyEdYPk/6MFj\nAeH4eJoi9BYAvk3bFstWdalcVV3Feyk/iNxf3Fgjl76TVmJ+MaYPLhkDnFC5\nShHFxUIqtDGwqiaDAkWmEDNtt/XMVNrXlqiPCbj3DOKT8LPfpnrdKmw9NYla\nbLcgc4AK25S82Fh3oaSw1mnifokAMqt3KuEQhITKMMmq57XBoWBFiYcTdjAh\no0LR\r\n=BaA5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/8dccfmsyNY51sGQLZavEURAOl18Pd7Be8n5vkiq0wQIhAKWYrkVMQcgmYhJ9FzivvRnje8aIrtVdu6oqJCY9vEzH"}]},"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-textfield_0.16.0-canary.d083d93a.0_1589242696159_0.8054663255829724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.058cfd23c.0","@material/line-ripple":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-floating-label":"0.16.0-canary.c95d429c.0","@material/mwc-icon":"0.16.0-canary.c95d429c.0","@material/mwc-line-ripple":"0.16.0-canary.c95d429c.0","@material/mwc-notched-outline":"0.16.0-canary.c95d429c.0","@material/shape":"=7.0.0-canary.058cfd23c.0","@material/textfield":"=7.0.0-canary.058cfd23c.0","@material/theme":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WAqiA84QAslPRD917P8/mru6KBjI03fzbjzE1Q/d0XieRZGhITr+3fiefH65mPgvzNUBf7MS8D9IhyxYr29DEw==","shasum":"9bfc7556a06736bb4de478a1d0b3aef0ec1b6b2a","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":249603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxb1CRA9TVsSAnZWagAAWs8P/jhjppQfj6ubbD8RD6bL\noKURs9oUMte1C8xUYT9gn+I1ej/IFfpTrKa+4l3xn2A9i/OnmivapNHfHTia\nsorDsrk4pEN3dVXdDhxkCsuCNSVDpf4Fq25Z0BQ9JKxWRynM6UzeM4WGv2Dl\nD0eVuvrysuV09O5Oonn6WAA4EkrHzxs9EE5DTKKxnhcTi3hmVeX/3q6Rt71v\ntZUBHKJ9GWHQVSU7NyVOx8Shy3RbFsxSXsaFlZvqaeW5HCCJGG+DIx1J7H5U\n8GCO7GwJL13KUzs2D8Brl6xznNH20wl9mDfO6Maiy5MCuZ6cpFGM/rlGmVWB\nhR3Paqr8wvwfUNXHzi65qnZlBuwQBcKm5xIq3q5d+zuXXVt+vkaooJU96VfU\nLmhy9ALGXT0uzRNtGWwKZh3f5q5D6FsfueG6bnx/Ualzt0svhH0DqQ8lvq33\nLU+Ln+Fp+vHCdsuN0YJKLrD4bdvIuiP+/SMOvy3/7gTyB5LuL6rP87wrHXdB\nb9u/WrnQgI4tarE0rzC6A+QMssr/rxbDyXqHhDy6ZxP2FcrsbP6e1EcnWHL9\nvDkUGUbD8SSrWMcfTqWcH8jjq1YIu+6N2jx1KKNPiNsJMcVUkP/IL9YaEgrp\nCUSfOvVoRoN3EeHn++0ajMd/aX4x076JNoDPkJIpyCVqHXk6WiPZPARcNVMO\neKeU\r\n=atTZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ0h7b35aADmGhskwf5QhGTWSYXBCh9czQtYzNEmAWDQIhAN7Z4qSgD2ksFLjbyvsJBSEGAZmko8sKCwvskH/X4Ey0"}]},"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-textfield_0.16.0-canary.c95d429c.0_1589319413316_0.5972822018954977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.0a371b4fe.0","@material/line-ripple":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-floating-label":"0.16.0-canary.0c1ad726.0","@material/mwc-icon":"0.16.0-canary.0c1ad726.0","@material/mwc-line-ripple":"0.16.0-canary.0c1ad726.0","@material/mwc-notched-outline":"0.16.0-canary.0c1ad726.0","@material/shape":"=7.0.0-canary.0a371b4fe.0","@material/textfield":"=7.0.0-canary.0a371b4fe.0","@material/theme":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-87WnqS/AmjBvquHiN5P2vEuo2CZD5uirZ8zuXRKG9/rm0Du4qZU6u3AzWPNcVTrupdqqYG3DpiyYODH2V7lMtg==","shasum":"32ca3f96edbb78a7390b75ba8661a555d2ea2321","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":249903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CDCRA9TVsSAnZWagAAxoMP/2Sn8A+KCb3hk+RGTf/I\nAe0HFTJKX9ugY4rqtVUPZwkHWySspGkxYniMXQ4Pr2tYAegtJvi42VtDXI6p\nROouBdqiohQgWhDeWnDt7GlPN5xtJuml5bowY4aVUoU9fiAkpzJXk1qpLKPl\nYhqoh7cvaeRBqIupAwW/Sh8cF9gmLN18/Ud0TiFNhp9qyCX1YYx+P8ABiM24\n800wkV5DwbAY2P4fjllCJ1MyRcmK63LWHz18iCV0HOTnlmM13ID+tpNT0lK/\n3DxAfCICwwfYZMmhT0RMWjnDxiVGkXTYuuUfRLjLnsoKo1JskEM6TNykVn32\n/Mg9xzJFQUpLKWgNaDY1zx1cIiWYmx0V7sCbsgoswIwadf0b7fdt1EufM4UN\nau3OTXBXbauB3Lv/I6WNLz/UDCJnqQd+QeyG8igYW7diNXQ3VYqCu0sr7rmv\nVXxJTG12JIJJh1TLSY6jscOUAoWJ9vCX3/5TbohpmYVJQU0GafeLKuPBU1G8\nmzfX0o3P8H8lfmGAoCdbAbz31wAKLMv1sac2TkMYsO3qxUmh7g5gL6WU3jFb\nsdgD5faqb6i14mWsSByL8H0ErDjjrw4CcMnZ3AYkNN4SeRsOYi1pPk8mMvWa\n5AvRmSf4yFNUsf94JCsLEtLs3byjUiUumOC6Ve59V7sRNcALqynNnz+wC31H\n+Rpb\r\n=r8+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxNVRO0KwT37AtZzAgaEz6difOdghq2pD1fh3u6KZEjAIhAM7QkfW7a+vp3MP9kQ9qbTtJDtOXa4Q+9doGUAWTCClL"}]},"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-textfield_0.16.0-canary.0c1ad726.0_1589330051128_0.7034208406899387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-floating-label":"0.16.0-canary.8b6a4700.0","@material/mwc-icon":"0.16.0-canary.8b6a4700.0","@material/mwc-line-ripple":"0.16.0-canary.8b6a4700.0","@material/mwc-notched-outline":"0.16.0-canary.8b6a4700.0","@material/shape":"=7.0.0-canary.2139200b3.0","@material/textfield":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jkrN39BmNduQuwEwk+ne0Ly41R9kWFnwqWRTvVvKNKzBsjrLSb1LtdRBdWSd66wzeTi3fbybDMZ5AgpWrbWvNg==","shasum":"3d2787bd44b6881daa875c8b8e62bd5df17b4c2d","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":249903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwYCRA9TVsSAnZWagAAHOUQAJ66pafJk/m8VmoPCehi\n7ySw1Mku/WKDrnuuDJ6W8XNo57WEox1gVDn6gIxchHWDAvexcdnSeRa3iuaK\nYy5KXsUndsuRd2+sFbahR5e4guuik2Rz6ihv3RCJnKiANQIt3WJU4zXV/yoj\n/nPupLNbAV8Kl+KG2IxIT51R4pw+HGp1r7S+Lacf1I+oOGmoHabE/Fvvji9P\njAOmQLJEn/L1n6xLRo6r9ppfXGkOeLTdgSaryfVcN5AB1QwfVuzJmd0HeaPa\nI8CJMxWSYhENuEKkx/KQVMhoYMe+BvTpSkpsotQXK86LvaGNhR6/j7nhxTUr\naVOQdMp8/mpSKibAPUmY6d540TZ7R8M012cdDEOGmndh1IDZQBZe42xBNZUO\n+oQxdilLhL/k45PVSBM2zMz8E84Q+3nJeoZ9RS76uKTkq6LOA+ilIOmiDa1z\nCber98slZDwW9iV7CjpDvOGK0EuQhv5InzMpNfQM1lYq2wBoVhkWHi6g6LEN\nH1FI4x8uQfN2NlUJIJQwhyWoPhQxrL3A8R73y4828nG2sPbCzAJ7CH+8jbnP\ni6O3wy5VP8UHSz+eYsevtGaQii1aHXpPQst3CnrAF8CWURZlqDjA4dfRNJk+\nZGcdDzrwOpYZZyum4Ky7nFocHietgNz1m8msVBVGFEGKBLMzchDsIB1nvpXQ\n0p8h\r\n=ojG9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmYXu45OvQS917oFnXL+0IJQmcHHP+YfKIfWzcT99lbAiEAwZLIowzBOeBvyuS3KOX/SHRMV9x7JjsaXtrOnJbbmKI="}]},"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-textfield_0.16.0-canary.8b6a4700.0_1589390360008_0.9704548190402791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-floating-label":"0.16.0-canary.3270effb.0","@material/mwc-icon":"0.16.0-canary.3270effb.0","@material/mwc-line-ripple":"0.16.0-canary.3270effb.0","@material/mwc-notched-outline":"0.16.0-canary.3270effb.0","@material/shape":"=7.0.0-canary.2139200b3.0","@material/textfield":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-m3s8KJC8RQoAJXG9NxJhKyng5uoafSxI4Nf2ChmqhEVC0hmtI5s5cfrCuWNMB5oa9KQdSIMea1v/lBVj5zGiGQ==","shasum":"83561b81cfce1b3abc9efed801d7eec8f9c89dd1","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":249903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWTCRA9TVsSAnZWagAAhxwP/3DRGk59edK4tcEVd4C1\nRqWEHTkfo03ZzlUvRBJt967hD5sAi5vGb3hsLUuW2DLisniq6SYwuCKgMgks\ngqos7v28wq4ouN0+FGzJTT7rdpAiR9wvHJG0WpLOmjyKKdiN7a6UZD/nnsCL\nrvxtqRbwvCu35bmJLob+YmHoF41KCYcQ4vOWLJrnC+yXyaINhuz3zdxPUww6\nXw3alBcNe2FRm+B71UOxZQ3gVPO/PDUFn+6OBQjvMNl0kHarWMTKhr89KtAS\naWc/BW8HFmSbyOVwWzYuAjcxRLqsNmbwmmV8a45CUGfXgxOuzbPHJuJAmRDb\nsJ3UsK7WPGAwpbhoZKsCLovgX9LiL0rCUZx7z+GiCHl1rHDruTpcKzvLLZKg\nhGhDoDsNnKykqgUlvCU0ceCJxKuDD+N0R6cZVO2vFVCpgP4DLM5zExRe4sXX\nA3IY82ZHTnc9owbMxAS2cNL4IIJBBWoJABa+sn80VGYe5nZDy5RJpFLODHls\n9qxeKgw3OfyKFZRU7fxktz4OIyIQysQwIg67GMgjcGSAhU4S8ZqNKo3Umznq\nbrIbLNYdRhul+fmUpm/VKdgSe3LYgw0apkxjuyQFxG2mMkHywjrRMC4/s+ls\nbwSZc8aQ7UH2WUC/KHJf4gCPyHt1KO/LLTWQx4nG+cz0W38OY0z8wSM/ajVJ\nTwrl\r\n=tHoL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYUy+rKRMKiQAB8onWbVoLtRaws4fePI7F9oAKz58qSAiEAyeJ4MJKpJvytooC5/67pa+HvajhmtIgqUiuIlmk7S4k="}]},"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-textfield_0.16.0-canary.3270effb.0_1589405075108_0.6417172270785063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-floating-label":"0.16.0-canary.832e64f7.0","@material/mwc-icon":"0.16.0-canary.832e64f7.0","@material/mwc-line-ripple":"0.16.0-canary.832e64f7.0","@material/mwc-notched-outline":"0.16.0-canary.832e64f7.0","@material/shape":"=7.0.0-canary.2139200b3.0","@material/textfield":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jm7I3f+YD8GsP9zFrt5AKnhfGevItTZe9clniFVV/z/Uc5PYRntGRXhztKii/DNg1cw9OQ6SzyhDV+AAro31VQ==","shasum":"906b8471f65dd9a32b9a8da50a7accdaa4b9d6a8","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":250809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJY4CRA9TVsSAnZWagAAqQMQAKN8wMs7b+5QpfVSEFUV\n24Cpt1lrFJwwgVBqkpaAwllF28PqsYnyo9sBDkpk/8s0yJtPgpPWdLsfgGw/\nZs7rgfdbNUnmbCheT2B8ahfyn5n50EpXg7WKi4plU4m48dtN90uI3K2S1F4F\n90SQ+PRWfF0fdCNxFpqT8UUfUwGe7ogNHOltBxr5LZ7qwHwZv18yvTUMHGIX\n24zHIFz4zrfs+Dta2578MrYsszLd5rY/OHkj9Hd4qbQEPCZIrF9l0ByyLpIy\nme+Vqs+WyZMG0/zG9p5K9PhJMW178TyqSiYYfog0OZTD2IWED0tsMIX8QU/6\nRuPH+GNLRzzy/FRbcwEmXgC6/UCbeoFT1Y54R5h1GwKjgkeq1bb7VA/WtNgH\nGIMGrYGoQW3LGODDnKbBJk2PB5ijh2L1rMQqEkhCxaKDpuVUtz+Ism8mHykf\nkkYhsSiWpdODOCDmC5hbMnxynSXWwnO3u0A0+VFcJH2nfY2RAKSQ4RExmroj\nr8awD5mQttnC4V3pQ6FB5MFwIqgg5dn6hKs47iKnSYjWW0SF5+f6vOmy3ii7\nS++JszMeEnSgOjBWG7UhQD9UtOKQJrBZBMzxZtL/85qFZbwCZ0O+O1eUu400\nqLzM66AlFu77zw9Y7K0kcCwo4F+l25zj5h+Zw/lkoaRPLdGNzFREz2g4SVKi\nzg4S\r\n=y/lO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpOUxfKMf4ztxg79b1Cy2Mv8rMi6vfxP0Mpius5JKLdAiA+YgeVVj9h/XwZTTxy+8EU+zmxWHyTJ862DuAxoY9Jpw=="}]},"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-textfield_0.16.0-canary.832e64f7.0_1589417527729_0.9550483083278687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.2139200b3.0","@material/line-ripple":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-floating-label":"0.16.0-canary.472fc4fc.0","@material/mwc-icon":"0.16.0-canary.472fc4fc.0","@material/mwc-line-ripple":"0.16.0-canary.472fc4fc.0","@material/mwc-notched-outline":"0.16.0-canary.472fc4fc.0","@material/shape":"=7.0.0-canary.2139200b3.0","@material/textfield":"=7.0.0-canary.2139200b3.0","@material/theme":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QD5di5Ol/aQ+V4Ms8Gfv9JDneWNfn1LKHvQX0IaYlrWMZqFHF+eapl/VqGDAHfk3Si2RDE34ZJz+1ZG0xUnopw==","shasum":"0656e3755e42ea3fe33cf315fa7840ed784b0088","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":250809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLyzCRA9TVsSAnZWagAAB9cQAJoeZan/4DAJ9Q5VY+PL\nD3VuVXi6pFEPIpKeq2e4iSJ0KXbtUndH1JvddIHWrOYcywEFY4F/fo/9BUN9\n4Il5NU1jM7PVTNQiozoc9H0b8JYffyJEQNdyQ/vtfTDKK96Eev4c8Xoq2ctq\nhGkbvO14dqNf257Do9G1QtlRCOpolXWr3TiaT5TF29Y2RNYr+5TA9v9PH/6Y\ntrWu1vRz3heoDGEI/RO99bzZRfkkl/IRcVt4LnHY1rp/FQ2XQLMLRJT7djVg\ndoYupK1OSj8qeWDguwoU8ErgEWbKoUVDJJO0ABoHHIjJvwsrc1DgbJi2enUR\nH1qMjt4BJaQQ/Ik7I8vXezJhoK/9DR2iJUhn6RhqhocY9/FnTLwE3aUiifIz\n0eGz7nUayUtajIeBmjXgg076qozXVMWF7GEUU5p1mRYCatMo3d9DPdaa9AmL\ncAwi7qWbKxHcFGMMd+U8Pm/gw00ppwCAk/4FKvAfGnh7svRkvnGRuXatemCV\ngt8P9j3RVY99rb+ow4RZimVElNXY7TYB+SccQvyFKa+UI2YiFFARUj3Rq+aJ\nneqNoo/EkSk6TXJMduyaliWLuWXpm28rNdNtY9O9dK9Z7hZuG7hPAYDCDdHj\nFi3gXHy9hrsBE1Qn47LoBcnZMjIOQW7VYYqPsvVVRF/TPkjnlrWiJHqtx+Dt\nyIN2\r\n=kv7S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEL1KlRDAHWf4Qr9EjDOGFMe99AsyHWx0qbUfqOBqUmpAiAkVVSGSZAUuDht7bC4I3sKyoGVJ5Wozfj7ZqwwaxnXZA=="}]},"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-textfield_0.16.0-canary.472fc4fc.0_1589427379273_0.23020628477687888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.ad0c0c103.0","@material/line-ripple":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-floating-label":"0.16.0-canary.4dcd7dd5.0","@material/mwc-icon":"0.16.0-canary.4dcd7dd5.0","@material/mwc-line-ripple":"0.16.0-canary.4dcd7dd5.0","@material/mwc-notched-outline":"0.16.0-canary.4dcd7dd5.0","@material/shape":"=7.0.0-canary.ad0c0c103.0","@material/textfield":"=7.0.0-canary.ad0c0c103.0","@material/theme":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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-textfield` and `mwc-textfield-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\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+N0A+J21aLQEX4tM89KHCNSY4hNKW4yjaiN8qZ3xDNNdljKj5EKuoWhQOChDca5D0dCr4lo8D80WlGc6+YjJew==","shasum":"889d9e4b6c612e34e4bec0c865e7a75fc4c518e7","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":250809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDMCRA9TVsSAnZWagAACRIQAJLkLqjcYdqvBE+TMYcH\ngXEnk0R9IQNynw6oPebfmf4+TIfBWdLlu2srMeXBRhb2UYATQLz20GK9RNFh\ntclEy73EJyRtrmsp4PITeFJNy3SU3+YJR39c4rMQXS6M7FdKOBUYs7ZY+p+l\nvlTJlxkq4/h8Sw50V/IIwsTMLNfP7Y5nshjOM9jCcz2E3Ml4VdgSOsZm4V2P\nyn/JjwShox9ToXTGWSGIbmxnbAyOkU8PSBwDIwKl7wnMZSp1gzlC/XLZ9NZU\noAA4XY2xHD/2oqjY0GSx11Zuy5Dv3GnU7GtjBx6elxBrnb5eD76b1EJASGLg\nSED/lrl1ya6T0jX3KIS23WVQ7pXZFLU+Rw2u+Yv/KZjIey7/KD/Si1uNqMBm\n17z6p8RcLzI8D89uEECa3ZQztUGHocNW2E3N+5xPk9vqRs5SsFwAri73r9Tl\nmb9DVrSW3Na2GBki+j/7dW2C1iqMWPzZjg8Yq/X5istlzpJcXqeRnXgyzchl\nY+kRdmjJUrkuX/MQ8nk+TgPYVr8q38pBFYgjs6j2Lhmxmr5nTIulrVtPFg8G\nkxrW+loPgluYyH1XOGu8gZmA2bQr2Lm/p6u1pbWYnPmaiPvSyFZtv1IKfaFS\nLfSZH14DgmyOmsyi6/pRp53NJXBwgTWqV5sRhQ+pxV8L2y7PIiGPh8IqmnCs\niGaY\r\n=3By8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQLWhIzY5eKLQ2H5beIrZOiE6fN+cbf49+iOl6xqZDfAiB5PK06w6XVPuD57jTP/JGW81eJuJ7n9qRHvQn5v3dr7Q=="}]},"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-textfield_0.16.0-canary.4dcd7dd5.0_1589473483767_0.38539817087840245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.ad0c0c103.0","@material/line-ripple":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-floating-label":"0.16.0-canary.bcd3400d.0","@material/mwc-icon":"0.16.0-canary.bcd3400d.0","@material/mwc-line-ripple":"0.16.0-canary.bcd3400d.0","@material/mwc-notched-outline":"0.16.0-canary.bcd3400d.0","@material/shape":"=7.0.0-canary.ad0c0c103.0","@material/textfield":"=7.0.0-canary.ad0c0c103.0","@material/theme":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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`name` | `string` | Sets the `name` attribute on the internal input.\\*\\*\\*\n\n\\* `TextFieldType` is exported by `mwc-textfield` and `mwc-textfield-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\n\\*\\*\\* The `name` property should only be used for browser autofill as webcomponent form participation does not currently consider the `name` attribute. See [#289](https://github.com/material-components/material-components-web-components/issues/289).\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YqY1I3yHNQhCpDqNou4gyQMHHLn1oCZpFhJ8gncZxma2Fv/hoqWr0JZ3UPAuYUI2VT0CbDREzlzdKb9YcdPDEw==","shasum":"42e0778145d599b32adcef99a62bac98fb4f88e2","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":251787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyMCRA9TVsSAnZWagAAI3gP/1lXN/pEO0ZbgsZ5y152\nu/dfiVNZYZT3NglU/afvELdFd3rGUTcpcBZB0w/9BO2jmUeM68D/KEX0Qyc6\n2vnolrHDovbCohJ2ak7aAw8Lpiev2XuRr9L7QJ73Gxfv4MgQFM/Vv1Ac1cMM\nAghfbmFh2DlGp2hzngTmQW4RLwT+K62nanScu6XbCniEB77NO+Ppo85Ufc5p\nqNWj8oiRB2K0G9fq26+xlQ3/q/cx04eYzrjdpPtOg2h1gE2bDcM5mh4Ro6lL\nl88L+wI1WYGIyEUTvxEzSnJUJOs92V3miNDNhep3P4IjliNi1atu9sAh1H1g\n2lceZN2iKtnzf3l3PM4T4O0UDT+7uZ50WryNW72D1Du8/CEp7X9g8y2JHcPp\nTa5SpuBTUgsguHKu+tC3wgtLTfySO5LX42SgTl8QfpdWwUjUGOns4O5tZoRE\nRpI4Xy5F0vAnCI94+kiN4VPBjGcZaXOvlw1ERbzhw4zaOfN3ZX4hVmXXnJU6\ncxI6N3GHIYZ0TppuJcqUh+HXwjdgApoS6afp690Mef1xmn1Ea+kqKuWlD0QI\nKWIxY+1osALUy2bsN2PndcHajmwZGXCXmj8zuPFPRWk/PO3HdY1pA+5VC8Tq\nGbkgVHKCpPxgFrmOI2NPm4JtT0MRstKjKJHiejzX5hcSXMg+HPJ700zMQCGv\ncrx0\r\n=gqGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5WVoenzP9TPbMN3BsMV55uGWvdpfJxjLrrnwAHjXi+AiEAlM1DH6s10AYpqvvMLvvtiEHhLxBPucmVtYO2Aoc2wrY="}]},"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-textfield_0.16.0-canary.bcd3400d.0_1589582988403_0.5373890988483763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.ad0c0c103.0","@material/line-ripple":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-floating-label":"0.16.0-canary.91f63179.0","@material/mwc-icon":"0.16.0-canary.91f63179.0","@material/mwc-line-ripple":"0.16.0-canary.91f63179.0","@material/mwc-notched-outline":"0.16.0-canary.91f63179.0","@material/shape":"=7.0.0-canary.ad0c0c103.0","@material/textfield":"=7.0.0-canary.ad0c0c103.0","@material/theme":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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`name` | `string` | Sets the `name` attribute on the internal input.\\*\\*\\*\n\n\\* `TextFieldType` is exported by `mwc-textfield` and `mwc-textfield-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\n\\*\\*\\* The `name` property should only be used for browser autofill as webcomponent form participation does not currently consider the `name` attribute. See [#289](https://github.com/material-components/material-components-web-components/issues/289).\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3uB+Pc6MLxsPfTSWbEdY56sYekL5+XW34RaZlkpQQGglt8t92FiltUoukboVpFLoln2dj1NbGZr0Unq8Nhc9/w==","shasum":"66c24baae68c55e205239b62b242be31e1b99f11","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":251787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUVCRA9TVsSAnZWagAAoy0QAIOLp+XXu7iynBqnYlcT\nnFbcWe22ko2HB8YZw+TX+ZUQLEWad9061d+fLdo1fdOkiTCGlWZ/rbxXQzsK\n+Y4c4AvBqmgMqCHskpcUcO2Fldb2TwLRPeR1Wqd7pgaQYnFf5Or2cEM/blLK\nYFc/rfudRnX7mGVSJJTgRF1njjhxK9Em7VlqkBlCVpc0YloLNu3UocRDWx4S\nQc39dj6ScKiNFUesnT1kwoi/TOe81v5wH6aO2W47NyhlfaPcxng1EbCCx76s\n483HtixhpOQr+fq0wf24o+t24lDVedP896TcKWfNC0gNIQ61CnhE5tYZk9EO\nTnmyTaoUXagPECXOHtxWsAXKXA5i7thgC23iO5lc+kqccQ/ab+Jkgk2GPvCj\nkYgNO/E/g/QJ2cdwLCWGWWfc50umYrim9jsN+z8s1pY3mTuuVc1p24VvS44o\nLbxfVXbIdA2Hkk4ja0HVxgaFH/qRbkUTW4dMUY/8HEq2HHnAsQ14n/w8mzwb\na+HOdpowA5nmXDGJgh641QLylxQqvxRe0213Vf7ZVqoX3E23fWVmlsiSzZf8\nrzw68/nLfWpEZsLMOrcV4N54l4A1bWOlCli912I8p35Dj8g0SzmewGu8kuu9\nscaGuZuFuoHCHIWbdjCWQ5K1zfeecztSB9E7RG2Pf4XuD0Sa6RAfuGwDUGNh\ntQ/g\r\n=bAJE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPNHxjmAoheNUZK41yxTerUAv2WXKkYe7mBuTsRb4nUwIhAIgQcSmF8uxrBSmbL/+FFfVfqiDM4BP9n8bvK2ejYsRp"}]},"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-textfield_0.16.0-canary.91f63179.0_1589589269265_0.3580665070801561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.fd8f8f2b7.0","@material/line-ripple":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-floating-label":"0.16.0-canary.b8aafb56.0","@material/mwc-icon":"0.16.0-canary.b8aafb56.0","@material/mwc-line-ripple":"0.16.0-canary.b8aafb56.0","@material/mwc-notched-outline":"0.16.0-canary.b8aafb56.0","@material/shape":"=7.0.0-canary.fd8f8f2b7.0","@material/textfield":"=7.0.0-canary.fd8f8f2b7.0","@material/theme":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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`name` | `string` | Sets the `name` attribute on the internal input.\\*\\*\\*\n\n\\* `TextFieldType` is exported by `mwc-textfield` and `mwc-textfield-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\n\\*\\*\\* The `name` property should only be used for browser autofill as webcomponent form participation does not currently consider the `name` attribute. See [#289](https://github.com/material-components/material-components-web-components/issues/289).\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6pKP3W8AHRdFcJlMQU0YWQ6k7Qb9Qcrew94C9FFyo/ZZYgDPeTETxB01UNbNVYaaaEvDzCpgbTvN5U+9njYxbQ==","shasum":"5c9c393533b151b600bafb2b3b97b907d9e92353","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":251787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSHCRA9TVsSAnZWagAAUBwP/2fovSySbrIT88QqkJPP\n6Lh13K0VrieMu7haMRQsd6ppcfuHOahdFlNXloAfWt6b+6FCx2ZLpLHKNM3U\nO9gqhWoW+ziEpGChIeADYOk2IbDN5fKxRn47yyiOUyr8W7NhHll3IaHQCMBG\nYWxBu/5nr1zNmDwGYedUaYO3jMb0Nqej8XTFNHJkuxC006UTqemjoFUKMjv/\nit2Cg3E2KVStK2Ryr4DPm3fOhLJM42nvLNiobbXjsfdfISP0tLC9IA0oYyxa\nvW8WRb4TB10YYddwSyynxOA6mAQivhHPvThbWUv18tsNcBw5ezRwPcYOqZ7L\nGgOoNZdnQU8vkuNyWWakGoXP14CdzoFUfgqm3MtedCfgNapiKur4ERTZm04d\nlUi6uFcnWFjMw+8ir6U1RVVYxoX80Dafj4Ml9i4RoFmDDKaWjPogbxqbMB5B\n+7Tzz0okWjw1GnF3mw/H1ezH94Kkw+P7s4H2ZE+b2LOFDVOyHVF8tC8RcFKx\nek+w5GU+vr5hquLY6sWTatDPbWOTHN+DL71dEHaIIMgXsMKU4bFa0zTbBBsG\nTci0ojInmAgB+qLsjK0KTTudJc+Wusqw4rWy2uUG5I+dyZ1SSkCOBV6En/cF\nr5cL8JUdQdwCHsJHOFVMvJvT0WWwXIeg8Ph2rELie/U8O7kXmOcA2zBPpHkB\nxML4\r\n=z18a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPvp+GGNlDq8e8oVARAFwkD77PlZG0TnW21hx5dH0lhQIgSDpxYJ3I/7Y/VIVLpDWFvuNRMNVwHR0Ukn7oSgiAzAU="}]},"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-textfield_0.16.0-canary.b8aafb56.0_1589826694470_0.9203753338098233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.730920fbb.0","@material/line-ripple":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-floating-label":"0.16.0-canary.a564b194.0","@material/mwc-icon":"0.16.0-canary.a564b194.0","@material/mwc-line-ripple":"0.16.0-canary.a564b194.0","@material/mwc-notched-outline":"0.16.0-canary.a564b194.0","@material/shape":"=7.0.0-canary.730920fbb.0","@material/textfield":"=7.0.0-canary.730920fbb.0","@material/theme":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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`name` | `string` | Sets the `name` attribute on the internal input.\\*\\*\\*\n\n\\* `TextFieldType` is exported by `mwc-textfield` and `mwc-textfield-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\n\\*\\*\\* The `name` property should only be used for browser autofill as webcomponent form participation does not currently consider the `name` attribute. See [#289](https://github.com/material-components/material-components-web-components/issues/289).\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+w22PUyH5/JUIdllXEgF6Q31IIQLNvWCexU0A2HPHXSWcR7zIgOW6m6vEHf2VlCsQzlwbw+GrSLhXRLTvaz/mw==","shasum":"a3ea7db7a4c7566b3a3aeda817edc7a53fbe55a9","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":251787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRDCRA9TVsSAnZWagAA2uMQAKQ/dhST/6DMZuaoJBc3\nhuaJq/hWNJJKif8bMed+h/sYyFdqT3TNNLM1gTYL6YR59C3FcUOzBMsWKGCV\nnO5eveZoMalQk/DtaDnR38IK5DzKkslL7g5j7NHvrWpef/L2SDpcq5b00bIt\nDjDfUNCUGA9F0dUzL3+HK/QnRpMmXOqMXFLzs3kAzkmxy0ipU1Ot0VQRRdb2\n52RCBZNTOj4FXq+NfK2IZQkGbmAnIy2hIquMctFbQQlSgLB7204S1h+ZctzT\nY2nLk846S9eMNmnYhbAHn8uC7uX2e8ykKV12Emuik3DD/uUXkDTgx7yob0ru\neZgm2kR99AUHAJ87Dc9vm5WzGYs3YCXhUSR1RvqsQUip5UDA6Ag4vHjncN2j\nI4hy8AYUg4pWKYsT5Q6WEKFIMeQETPo6DnMiR0aFpIGEnT4A51kLUSEuHQJP\n9Ad2nC/JGbAYnvIzodmDlLNFC5LseqB7iqGYnFb/q2behV8wG7QjeF8LdKvE\nFEfnNHbTphfWOCovbq9UtQwPAIKcfoajTAo3lunbiDAzcsvDxGrWhmkQVmXk\nIf76TejlDk9ZFNAmYGFhtlT7MkMolUzW5ggmWtjOrnIWySKSGVBMA8HgHpjo\nIEEAhFMtXB8UFB6gaehwbkxuTF9f0Foi1TJwngwE64QHmhVVS7/TOtMDtQqp\nkl3l\r\n=V7Gd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaH8JhSFRBHAIwvSuVVc7p6yyGA/fFZUMeBuUZ0E6lpAIgGJSIZgzIumkqV5opIwBhpaBZ8PBRm8cw0qRGTmytr7o="}]},"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-textfield_0.16.0-canary.a564b194.0_1589843011049_0.23645147601267724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.730920fbb.0","@material/line-ripple":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-floating-label":"0.16.0-canary.ef56465b.0","@material/mwc-icon":"0.16.0-canary.ef56465b.0","@material/mwc-line-ripple":"0.16.0-canary.ef56465b.0","@material/mwc-notched-outline":"0.16.0-canary.ef56465b.0","@material/shape":"=7.0.0-canary.730920fbb.0","@material/textfield":"=7.0.0-canary.730920fbb.0","@material/theme":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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`name` | `string` | Sets the `name` attribute on the internal input.\\*\\*\\*\n\n\\* `TextFieldType` is exported by `mwc-textfield` and `mwc-textfield-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\n\\*\\*\\* The `name` property should only be used for browser autofill as webcomponent form participation does not currently consider the `name` attribute. See [#289](https://github.com/material-components/material-components-web-components/issues/289).\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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 textfield 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\npattern mismatching (the value is `doggos` which is not a number). The value\nincludes `dog`, thus we make it valid and undo the pattern mismatch.\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-textfield@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oEX07awaTVMgYtdaE6ojRTUAqfg9fOIsuAjWc6CPNcKfr8EX4nQYZDp/Vu75y7hmQkZywwZYduT8BnRkHTwdzQ==","shasum":"66325969d72f71f82ba603950b6d0cce03f07c1a","tarball":"https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":251655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1b1CRA9TVsSAnZWagAAfr4P/iUOTrXOSBut+qFf8hxy\nLL22YFWPZp5rL0GQCYqc7Db3PR9MJuHVD1K+bEtk19ekL2uEzrioJxXXTcPu\nzCSCTFSfcdfNufH74Y6fKsjcGGmUU6fp+yhTdIh9XiQm4oaPEsRwPQVVSLNm\nBaggzMtmrMxAPrxT0reDAKvYL0E2/zVGPgC6LkhHxbPEbLMh4pW1M35QMKKQ\nAPNecfO+kPqR/FljyO258ZGcW2npepZR74vkcqh7aUEmjfcW3cw9moY1hMPs\nbUcgL7miuh2aZCHOtEFi9yZxkpiiV8Myb95bmu2ZXs2OEUVyiStsdeIWydq9\nUeSxS4aCBKqCVxTeA0fzN/mIvKA0HNC3+NWlmEvgwSftPBQSB0j0kQX9/z+z\nM3y24kbsXsbBk6vkSKFcsWE3GGr1R3DnC2igoJT2dlzHJCmosWBcwLKmNvA+\nMv7oZch9MhL1iE2zVq05/6VDsIxWRh5E7kTRVmFM9eaNqAb8ZrSa+LTC1uGm\ncIp2DAtJrQdm1yrIRq1iHw5SBdJiqpMo3NJb5/Y/wQmKqEA9zC8PV6SttHHg\n8Q4X8h4nOTr4Xy/8D4wbKdp9OVBRd9jfjgMoRHYXvtqZQcusrf2/vIJYYuMI\ns1L7ZuPU7uu6U6hWvBkRSrg6+7LVrXoZKcq7NLmdvIej0Sc1Mu7+8SfWT3LY\ncJ4k\r\n=a2MM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7cBzs2lEHO0a4U2/sGGsLkcU8LMov/WXHUNUkVbJ9oAIgXa8r202K0rS/qnrWPcnyZhCsOYwKuVw+Jg2eG/w6KaY="}]},"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-textfield_0.16.0-canary.ef56465b.0_1589860084316_0.01548134181123939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-textfield","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-textfield.js","module":"mwc-textfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/floating-label":"=7.0.0-canary.4497b86ed.0","@material/line-ripple":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-floating-label":"0.16.0-canary.c22dcd71.0","@material/mwc-icon":"0.16.0-canary.c22dcd71.0","@material/mwc-line-ripple":"0.16.0-canary.c22dcd71.0","@material/mwc-notched-outline":"0.16.0-canary.c22dcd71.0","@material/shape":"=7.0.0-canary.4497b86ed.0","@material/textfield":"=7.0.0-canary.4497b86ed.0","@material/theme":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [](https://www.npmjs.com/package/@material/mwc-textfield)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nText fields let users enter and edit text.\n\n\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n\n\n```html\n\n\n\n```\n\n### Icon - Leading\n\n\n\n```html\n\n\n\n```\n\n### Icon - Trailing\n\n\n\n```html\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### 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\nName | Type | Description\n------------------------- | ----------------------------- | -----------\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`prefix` | `string` | Prefix text to display before the input.\n`suffix` | `string` | Suffix text to display after the input.\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: requries `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 to accept input.\n`validationMessage` | `string` | Message to show in the error color when the textfield is invalid. (Helper text will not be visible)\n`pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`min` | `number`\\|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`max` | `number`\\|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (empty string will unset attribute)\n`size` | `number`\\|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (null will unset attribute)\n`step` | `number`\\|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (null will unset attribute)\n`autoValidate` | `boolean` | Reports validity on input rather than only on blur.\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`name` | `string` | Sets the `name` attribute on the internal input.\\*\\*\\*\n\n\\* `TextFieldType` is exported by `mwc-textfield` and `mwc-textfield-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\n\\*\\*\\* The `name` property should only be used for browser autofill as webcomponent form participation does not currently consider the `name` attribute. See [#289](https://github.com/material-components/material-components-web-components/issues/289).\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `checkValidity() => boolean` | Returns `true` if the textfield passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the textfield otherwise. **NOTE:** When accessing any property or function that checks validity at textfield initial boot up, you may have to await `.updateComplete`.\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 textfield 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\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-field-filled-border-radius` | `4px 4px 0 0` | Border radius of the standard / filled textfield's background filling.\n| `--mdc-text-field-idle-line-color` | `rgba(0, 0, 0, 0.42)` | Color of the filled textfield's bottom line when idle.\n| `--mdc-text-field-hover-line-color` | `rgba(0, 0, 0, 0.87)` | Color of the filled textfield's bottom line when hovering.\n| `--mdc-text-field-disabled-line-color` | `rgba(0, 0, 0, 0.06)` | Color of the filled textfield's bottom line when disabled.\n| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.\n| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.\n| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.\n| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).\n| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.\n| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.\n| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.\n| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.\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* `pattern`\n* `min`\n* `max`\n* `step`\n* `validity`\n* `willValidate`\n* `checkValidity()`\n* `reportValidity()`\n* `setCustomValidity(message)`\n\nAdditionally, it implements more features such as:\n\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
![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/standard.png\")
\n\n[Material Design Guidelines: text fields](https://material.io/design/components/text-fields.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/textfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-textfield\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 / Filled\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/icon-leading.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/icon-trailing.png\"){kind=icon}
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/helper.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/color-primary.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/outlined.png\")
\n\n```html\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/shape-left.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/shape-right.png\")
\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/shape-left-right.png\")
\n\n```html\n\n\n![](\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/textfield/images/fullwidth.png\")
\n\n```html\n\n